Adding rounded corners to a nav bar CSS

Question

I have nav a bar on my site but I want to put rounded corners on each end of it. So far my css for this is..

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

and my 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>

I have rounded corners to put on each end called menu_l.png and menu_r.png. Can't quite figure out how to put these on either end of the nav. My attempts so far seem to be getting ignored by browsers. Anyone have a best method to achieve this? Im trying to avoid tables.

Cheers

Answer 1

The easy way to do this in some modern browsers is to add something like:

-moz-border-radius: 8px; -webkit-border-radius: 8px;

which will handle mozilla-based and safari-like (webkit-based) browsers.

Alas, IE is more complicated.

Answer 2

You could set the left background on the first link and the right background on the #nav element.

You could also set the left bg on the #nav and the right on the #nav by using the content selector ::after.

Answer 3

Try adding a div at the beginning of #nav, and at the end.

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

then do this for CSS: (assuming your rounded corner image is 15px wide)

#nav {
   padding: 0 15px;
}
#nav-left, #nav-right {
   float: left;
   height: 15px;
   width: 15px;
}

Then apply rounded corner image.