Currently, firefox and all webkit based browsers support this feature. For firefox, we use -moz-border-radius and for webkit based browsers we use -webkit-border-radius. So here it is…

The HTML:

<div id=”nav”>
<a class=”current” href=”#”>Home</a>
<a href=”#”>About</a>
<a href=”#”>Services</a>
<a href=”#”>Products</a>
<a href=”#”>Solutions</a>
<a href=”#”>Contact</a>
</div>

The CSS:

#nav {
background: #90b557;
height: 32px;
padding: 12px 0 0 10px;
}

#nav a {
padding: 4px 8px;
margin: 0 10px;
color: #334D0F;
font-family: Trebuchet MS,Arial,sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#nav a:hover {
background: #deeec2;
}

#nav a.current {
background: #deeec2;
color: #000000;
}

With a little more tweaking I was able to make a navigation bar just like smashingmagazine.com. Here is the CSS:

#nav {
background: #404040;
height: 32px;
padding: 12px 0 0 10px;
border-top: 4px solid #eb4c07;
}

#nav a {
padding: 4px 8px;
margin: 0 10px;
color: #ffffff;
font-family: Trebuchet MS,Arial,sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#nav a:hover {
background: #5a5a5a;
}

#nav a.current {
background: #eb4c07;
}

I have tested it on Firefox 3.0.5 and 3.1 Beta 2 and it works. I hope it also works well with all Webkit based browsers. Other browsers will not be able to render curved corners but otherwise OK.