Css 带导航的双边框效果？

我以前做过这件事，但我不记得怎么再做一次

我想要得到的图像：

到目前为止我所拥有的

在每个链接之间，有两个边界。是的，我知道如何使效果，把两个边界放在一起。但问题是我做不到

起初我试过了

它成功了，除了导航系统左右两端的边界突出外。我尝试了

：类型的第一个

和

：类型的最后一个

来删除末尾的边框，但它们没有消失

然后，我尝试使用类型的第一个和类型的最后一个来创建边框，但是再次尝试。它不起作用。所以我真的不知道该怎么做才能产生效果！我希望有一种方法可以用Jefferey Ways代码删除前端和端部边界，但我做不到。有人能帮忙吗

这是导航的全部css

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

但是我建议你把分隔符剪成一张图片，然后把它放在

li

as上

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

李：第一个孩子

background: none;

---

我认为这些是槽/脊边界，而不是两个1px实体边界。

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

background: none;