Equal border-sinistra e l'altezza border-right in CSS

Question

Come posso fare border-left della stessa altezza border-right? In altre parole, come cambiare l'ordine dei bordi? Border-left è più alto di border-right. Il che si traduce in un "gap" di 1px.

.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

Che cosa sta succedendo, è che il css prova a fare un bel cambiamento di colore in diagonale nel bordo. Se si modifica tutto il 1px in 10px, viene visualizzato il problema. (Immagine, vedi: http://jsfiddle.net/DaTCy/1/)

Se si utilizza 1px larghezze dei bordi, il fondo e il bordo destro sarà sempre sovrapporsi nel pixel in basso a destra.

---

EDIT: Come soluzione, si può provare a dare il bordo inferiore una larghezza di 0px, e risolvere il problema di altezza nel contenitore si mette il pulsante in

Answer 2

Usa border-left/-top/-right e border-bottom per diverso. [nested] elementi.

Answer 3

La soluzione più semplice è utilizzare in modo esplicito a:

border-bottom-width: 0; 

JS Fiddle demo.