Fix for Border line not full length [duplicate] - html

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/

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