html - Removing the Bevel Effect on the Corner of Borders

Question

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 style. I would instead prefer that one of the borders "overpowers" the other border such that a straight line is shown instead.

To illustrate this effect, consider the following:

See example jsFiddle example I created here.

The top two items display the default, beveled behavior. The bottom two display the desired, expected behavior, where in this case, border-top "overpowers" or "overrides" the corner of border-left and border-right.

The markup for the top case:

<div class="container">
    <div class="border">Item one</div>
    <div class="border">Item two</div>
</div>

And the CSS:

.container {
    margin: 5px;
    width: 150px;
    background: yellow;
}
.border {
    padding: 5px;
    border: 15px solid red;
    border-top: 15px solid teal;
}

The markup for the bottom case:

<div class="container">
    <div class="border-top"></div>
    <div class="border-reg">Item one</div>
    <div class="border-top"></div>
    <div class="border-reg">Item two</div>
</div>

And the CSS:

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

Although the second method I devised does produce the effect I want, it seems as if this is unnecessarily tedious for something that I would have assumed to have the default state. If I were to want the border-left to override the other borders, for example, I would have to deal with some float: left and inline element madness.

The Question (Finally)

Is there any easier method of removing the default bevel-behavior observed on all browsers?

Although the case detailed above is mostly easy for having the border-top or border-bottom overriding the corners, it is not as easy of a task, for example, if I need the border-left and border-right to override the border-top and border-bottom.

Answer 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/