Question

I did this before but I can’t remember how to do it again.

Image of what i’m trying to get:

and what I have so far

In between each link,, theres two borders. yes I know how to make the effect, put two borders together. But the problem is I can’t do it!

At first I tried 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;  }

It worked, except the borders from the left and right end of the nav is sticking out. I tried :first-of-type and :last-of-type to try to remove the borders at the end, but they didn’t go away.

Then, I tried just using both :first-of-type and :last-of-type to create the borders,but again. it didn’t work. So I don’t really know what to do to create the effect! I wish there was a way to remove the front and end borders with Jefferey Ways code but I can’t. Can anybody help?

Heres the whole css of the nav.

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

But I would suggest you cut out the separator as an image and put it on li as

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

and on the li:first-child have

background: none;