Equal border-left und border-right Höhe in CSS

Question

Wie kann ich border-left die gleiche Höhe wie border-right machen? Mit anderen Worten, wie ändert man die Reihenfolge der Grenzen? Grenze links ist größer als Grenze rechts. Was zu einer 1px "Lücke" führt.

.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

Was geschieht, ist, dass die CSS versucht, einen schönen Diagonalfarbwechsel in der Grenze zu machen. Wenn Sie alle 1px zu 10px ändern, sehen Sie das Problem. (Bild siehe: http://jsfiddle.net/DaTCy/1/)

Wenn Sie 1px Breiten der Grenzen verwenden, dem Boden und der rechte Rand wird immer in der unteren rechten Pixel überlappen.

---

EDIT: Als Lösung können Sie versuchen, den unteren Rand eine Breite von 0px geben, und die Lösung der Höhe Problem in dem Container, den Sie in den Knopf setzen

Answer 2

Verwenden border-left/-top/-right und border-bottom für anders. [verschachtelte] Elemente.

Answer 3

Die einfachste Lösung ist explizit verwenden:

border-bottom-width: 0; 

JS Fiddle demo.