Rounded corner navigation bar without images using CSS and jQuery

. Friday, June 13, 2008
  • Agregar a Technorati
  • Agregar a
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks

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

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">
function() {
"#nav ul").corner("8px");

CSS (you can change the colour values yourself)
#nav {
: auto;
#nav ul, #nav ul li
: none;
: 0;
: 0;
: left;
#nav li
: #e9e9e9;
#nav li a
: block;
: none;
: bold;
: #919191;
: 10px;
#nav li a:hover
: underline;
#nav .active
: underline;

HTML code
Finally, its time for an unordered list (ul tag) of your menu
<div id="nav">
<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>


Anonymous said...

you made it so easy for me dude! god bless :D

Serdar said...

thanks for your time for this article

it is very nice to find something about jquery via google


i copy and paste your code in an aspx file

it is not rounding...

what might i miss?

can you show this article on a working demo file

Fahad Ibnay Heylaal said...

you need to link to both jquery.js and jquery.corner.js file.

jquery.js - it is the library

jquery.corner.js - the plugin

the plugin will utilize the library to create rounded corners.

Pierre-Jean said...


Thanks for the plug...

I notice that it doesn't work on ie and ff BUT great with Chrome...

Is something wrong in my code ?

I use a special class to call the function and then i skin my cornered divs directly in html with style="..."

Maybe a url would be more releavant :

I'm sorry to annoy you, but i've got to far to let it down !

thanks again.

seroquel said...

Thank you for this HTM code tutorial.

tom said...

Hi - I used the latest version of jquery.corner.js available via link here:
For this demo, I could not get the ul to style at all. I switch it to $('li.first').corner(); and got the desired results.