Geek asks and answers

Equal border left and right in CSS

enter image description hereenter image description here

How can I make border-left the same height as border-right? In other words, how to change the order of borders? The border left is above the border on the right. This results in a 1px space.

.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}
+5
source share
3 answers

What happens is that css is trying to make a beautiful diagonal color change at the border. If you change everything 1pxto 10px, you will see a problem. (Image, see http://jsfiddle.net/DaTCy/1/ )

enter image description here

If you use a border width of 1px, the lower and right borders will always overlap in the lower right pixel.

EDIT: 0px , .

+4

- :

border-bottom-width: 0;

JS Fiddle demo.

+2

Use border-left/-top/-rightalso border-bottomfor different [nested] elements.

0
source

More articles:


All Articles