Removing The Bevel Effect On The Corner Of Borders

If an element exists on a page with more than one border color, the corner where these colors meet create a bevel by default. This seems like an odd choice for the border-corner st

Solution 1:

If you don't need support for older browsers (IE 8 and less) you can use box-shadow:

.border {
    padding : 35px 20px 20px 20px;
    box-shadow: inset 0 0 0 15px red, inset 0 15px 0 15px teal;
}

http://jsfiddle.net/fTGDs/

Solution 2:

That's the way borders work, I believe there's no way to change this without an extra element.

Instead of empty divs, you can use wrapper divs.

<div class="outer">
    <div class="inner">test</div>
</div>

.inner {
    padding : 5px;
    border : 15px solid red;
    border-top: 0;
}
.outer {
    border-top : 15px solid teal;
}

Demo: http://jsfiddle.net/fmcvY/

There's another way to do it with :before/:after psuedo elements but it's a little messier, however it requires no extra markup:

<div>test</div>

div {
    padding : 5px;
    border : 15px solid red;
    border-top: 0;
    position:relative;
    padding-top: 20px; /* border width plus desired padding */
}
div:before {
    content:' ';
    display:block;
    background: teal;
    height:15px;
    padding:0 15px; /* border width plus div padding */
    width:100%;
    position:absolute;
    top: 0;
    left:-15px; /* border width plus div padding */
}

You can write the CSS in a number of different ways to achieve the same effect. Demo: http://jsfiddle.net/fmcvY/3/