Effet double bordure avec navigation?

Question

Je l'ai fait avant, mais je ne me souviens pas comment le faire à nouveau.

Image de ce que je suis en train de faire:

et ce que j'ai jusqu'à présent

Entre chaque maillon ,, deux frontières theres. oui je sais comment faire l'effet, mettre deux bordures ensemble. Mais le problème est que je ne peux pas le faire! J'ai d'abord essayé Jefferey ways Technic.

nav ul li:before { border-left: 1px solid red; content: ''; margin: 0 -30px; position: absolute; height: 20px; } 
nav ul li:after { border-right: 1px solid white; content: ''; margin: 0 39px; position: absolute; height: 20px; } 

Cela a fonctionné, à l'exception des bordures de gauche et de droite de la navigation. J'ai essayé :first-of-type et :last-of-type pour essayer d'enlever les frontières à la fin, mais ils ne sont pas partis.

Ensuite, j'ai essayé d'utiliser à la fois :first-of-type et :last-of-type pour créer les bordures, mais encore une fois. ça n'a pas marché. Donc je ne sais pas vraiment quoi faire pour créer l'effet! Je souhaite qu'il y avait un moyen d'enlever les frontières avant et arrière avec le code de Jefferey Ways mais je ne peux pas. Quelqu'un peut-il aider?

Voici le css entier de la navigation.

nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto; padding: 11px 29px; width: 670px; } 
nav ul {} 
nav ul li { display: inline; padding: 32px; margin: 0 auto; } 
nav ul li:before { border-right: 1px solid red; } 
nav ul li:odd { border-right: 1px solid white; } 
nav ul li a { color: #626262; height: 20px; } 

Answer 1

#nav { 
    background: #282828 url(../images/nav-bg.png) repeat-x; 
    border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    -o-border-radius: 6px; 
    margin: 24px auto; 
    padding: 11px 29px; 
    width: 670px; } 
#nav ul { list-style: none; padding: 0; margin: 0;} 
#nav ul li { 
    display: inline; 
    padding: 32px; 
    margin: 0 auto; 
    border-left: 1px solid #LIGHTERCOLOR; 
    border-right: 1px solid #DARKERCOLOR; 
} 
#nav ul li:first-child { border-left: 0; } 
#nav ul li a { color: #626262; height: 20px; } 

Mais je vous suggère de découper le séparateur sous forme d'image et de le mettre sur li comme

background: transparent url(border-image.png) left center no-repeat; 

et sur le li:first-child ont

background: none;