Rounded corner navigation bar without images using CSS and jQuery

In this tutorial, we will create a navigation bar with rounded corners (without any image) using css and jQuery (a javascript library). If you dont have any experience with jQuery yet, I would recommend you to read these two tutorials first:
Change div content with jQuery
Toggle div element using jQuery

Requirements
jQuery library: Download here (packed version is 30kb)
jQuery Corner plugin: Download here (8kb).

This is what we will have at the end of this tutorial


Include jQuery library and the jQuery.corner plugin

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

jQuery code
This is the important part of this tutorial. Apply corner() function on your desired element to make its corners rounded.

<script type="text/javascript">
$(document).ready(function() {
$("#nav ul").corner("8px");
});
</script>

CSS (you can change the colour values yourself)

#nav {
width: auto;
}
#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#nav li {
background-color: #e9e9e9;
}
#nav li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #919191;
padding: 10px;
}
#nav li a:hover {
text-decoration: underline;
}
#nav .active {
text-decoration: underline;
}

HTML code
Finally, its time for an unordered list (ul tag) of your menu

<div id="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feed</a></li>
</ul>
</div>