Removing the Bevel Effect on the Corner of Borders
border, css, html
Solution
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/
Problem
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.