Html 将圆角添加到导航栏CSS

我有一个导航栏在我的网站上，但我想把它的两端圆角。到目前为止，我的css是

#nav {
left:40px;
position:relative;
top:140px;
}
#nav a {
background-image:url(../images/menu.png);
background-repeat:no-repeat;
color:#FFFFFF;
display:inline;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
font-weight:bolder;
height:44px;
padding-top:12px;
text-align:center;
text-decoration:none;
width:134px;
}
#nav a:hover {
background-image:url(../images/menu_ro.png);
background-repeat:no-repeat;
}

还有我的HTML

<div id="nav">
<a href="">Home</a>
<a href="">Food</a>
<a href=""</a>
<a href=""</a>
<a href=""</a>
<a href=""></a>
<a href=""</a>
</div>

在一些现代浏览器中，简单的方法是添加以下内容：

-moz边框半径：8px-webkit边界半径：8px

它将处理基于mozilla和类似safari（基于webkit）的浏览器

唉，IE更复杂。
您可以在第一个链接上设置左背景，在#nav元素上设置右背景

您还可以使用内容选择器设置
#nav
上的左bg和
#nav
上的右bg:：在
之后，尝试在
#nav
的开头和结尾添加
div

<div id="nav">
  <div id="nav-left"></div>
  //anchor tags
  <div id="nav-right"></div>
</div>

然后应用圆角图像。
如果要使用此图像，可能需要添加
边框半径：8px。即使它还不受任何浏览器的支持，它可能会一直存在下去，你最好现在就添加它。这在IE6中肯定会起作用吗？哈哈。我想我可能得坚持一些更传统的东西。谢谢，PeterI尝试过这个，但它不起作用，因此我的帖子。左侧和右侧图像不同。什么不起作用？如果图像不同，您可以在每一面应用不同的样式。谢谢peirix稍微修改了您的代码#导航{位置：相对；顶部：140px；填充：0px；}导航左{背景图像：url（../images/menu_l.png）；背景重复：不重复；浮动：左；高度：44px；宽度：11px；}导航右{背景图像：url（../images/menu_r.png）；背景重复：不重复；浮动：左；高度：44px；宽度：11px；}urrrr，虽然结果不正确，但请放心，它是有效的。谢谢
#nav {
   padding: 0 15px;
}
#nav-left, #nav-right {
   float: left;
   height: 15px;
   width: 15px;
}