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 : 35px20px20px20px;
    box-shadow: inset 00015px red, inset 015px015px 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.

<divclass="outer"><divclass="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:015px; /* 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/