Równe border-left i wysokość border-right w CSS

Question

Jak mogę dokonać border-left taką samą wysokość jak border-right? Innymi słowy, jak zmienić kolejność granic? Lewa krawędź jest wyższa niż graniczna. Co powoduje 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

Co się dzieje, jest to, że css próbuje zrobić ładny przekątnej zmianę koloru w granicy. Jeśli zmienisz wszystkie 1px na 10px, zobaczysz problem. (Zdjęcie, zobacz: http://jsfiddle.net/DaTCy/1/)

Jeśli używasz 1px szerokości granic, dolnej i prawej krawędzi zawsze pokrywają się w prawym dolnym piksela.

---

EDIT: Jako rozwiązanie, można spróbować daje dolnej krawędzi szerokość 0px i rozwiązywania problemu wysokość w pojemniku można umieścić przycisk w

Answer 2

Korzystając border-left/-top/-right i border-bottom dla innego. [zagnieżdżone] elementy.

Answer 3

Najprostszym rozwiązaniem jest wyraźnie użyć:

border-bottom-width: 0; 

JS Fiddle demo.