CODEWITHSUNDEEP
cssborder
Falko Joseph
Falko Joseph

Reputation: 101

Equal border-left and border-right height in CSS

enter image description here enter image description here

How can I make border-left the same height as border-right? In other words, how to change the order of the borders? Border-left is taller than border-right. Which results in a 1px "gap".

.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;
}

Upvotes: 5

Views: 1608

Answers (3)

David Thomas
David Thomas

Reputation: 253318

The simplest solution is to explicitly use:

border-bottom-width: 0;

JS Fiddle demo.

Upvotes: 2

Hidde
Hidde

Reputation: 11931

What is happening, is that the css tries to make a nice diagonal colour change in the border. If you change all the 1px to 10px, you see the problem. (Image, see: http://jsfiddle.net/DaTCy/1/)

enter image description here

If you are using 1px widths of the borders, the bottom and the right border will always overlap in the bottom-right pixel.

EDIT: As a solution, you can try giving the bottom border a width of 0px, and solving the height problem in the container you put the button in.

Upvotes: 4

Marat Tanalin
Marat Tanalin

Reputation: 14123

Use border-left/-top/-right and border-bottom for different [nested] elements.

Upvotes: 0

Related Questions