Equal border-left and border-right height in CSS

Question

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

Answer 1

The simplest solution is to explicitly use:

border-bottom-width: 0;

JS Fiddle demo.

Answer 2

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

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.