MySandbox

There are 3 ways (as far as i knows) to create round corner menu, by image and css, css property and javascript. And in this post we’ll try to create in that 3 different ways. Actually this is some old issue but maybe one of you will need it someday . So let’s start it

1. CSS Property

By adding ‘-moz-border-radius’ for FF or ‘-webkit-border-radius’ for Safari, ucan create round corner element. Comparing to other maybe this one is the lightest and easiest way to create round corner element. Here is some example how to use it

applying bottom left

-moz-border-radius-bottomleft:7px;

applying bottom right

-moz-border-radius-bottomright:7px;

applying top left

-moz-border-radius-topleft:7px;

applying top right

-moz-border-radius-topright:7px

applying all corner

-moz-border-radius:7px;

So far i only know that this technique only works for Firefox and Safari. Remember that ‘-moz-border-radius’ is works for Firefox and ‘-webkit-border-radius’ for safari

view demo (all corner)

2. Javascript

By using some javascript function or plugin we can create round corner element. So far if i need it i use jquery corner you can download this plugin here http://malsup.com/jquery/corner/jquery.corner.js?v1.99. The best thing using this plugin, you can create diffent shape for corner, not only round. And it have good browser compatibility.

Here is basic sample how to use it.

jQuery(document).ready(function(){

$("#nav li").corner("7px");
});

view demo . For complete example, please visit the official site.

3. Image and CSS

In this part we use images as background to create the menu. We slice rounded images into 2 parts. First is for the left side and the other is for the righ side (see picture)

One of the image will wider than the other, in this example we create the left side wider than the right one.

Images slice for menu

As you see at image above, we will put the wider background in <li> and make the left side menu looks round. Then we put the right side in <a>. Don’t forget to make <li> and <a> have the same height so the round corner will look perfect (use padding to adjust it). Here is the the css code

ul,ol{
padding: 10px 10px;
margin-left:10px;
}
ul li {
list-style: decimal inside;
list-style:none !important;
}

#nav {
margin:0;
padding0;
overflow:hidden;
float:left;
position:relative;
}
#nav li{
float:left;
margin:0;
text-align:center;
height:32px;
margin-right:10px;
background:transparent url('images/menuleft_bg.jpg') left bottom no-repeat;
}

#nav li a{
margin:0;
height:16px;
display:block;
vertical-align:middle;
padding:8px 10px;
background:transparent url('images/menuright_bg.jpg') right bottom no-repeat;
}

view demo

Thats it, thanks for visiting my sandbox