How to make rounded corners in your existing menubar

This is a simple and easy tutorials for beginners , which make rounded corners in your existing menubar without using image and can be easily implemented on blogspot blogs.There is a lot of code snippet around to create a rounder corner ,but this one is simple CSS technique of rounding off corners using  some css atributes.
This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

Note : -moz-border-radius: 10px; IS used for rounding corners in mozilla based browser and -webkit-border-radius: 10px; for safari and chrome

Add following CSS attributes to your menu element to make its corner round.

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

  Add following CSS attributes to your menu element to make its left corner rounded :

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

    -webkit-border-top-left-radius: 10px;

.

You can use  different possible combinations of  topleft, top-left, bottom-right, bottomright etc

• -moz-border-radius-topleft / -webkit-border-top-left-radius
• -moz-border-radius-topright / -webkit-border-top-right-radius
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Lets Implement Using Example.

Before Rounded corners :

#navwrap {margin:auto; width:560px; float:left;}
       .topnav ul {list-style:none;margin:0;padding:0px;  float:left;}
       .topnav li {float:left;margin:0;text-align:center;}
       .topnav li a {font-family: Georgia; font-weight:normal; font-size:10px; text-transform:uppercase; display:block;padding:6.5px;color:#FFFFFF;text-decoration:none;}
       .topnav li a {background:none; }
       .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#FFFFFF; color:#E27100;
}

After Rounded corners :

#navwrap {margin:auto; width:560px; float:left;}
       .topnav ul {list-style:none;margin:0;padding:0px;  float:left;}
       .topnav li {float:left;margin:0;text-align:center;}
       .topnav li a {font-family: Georgia; font-weight:normal; font-size:10px; text-transform:uppercase; display:block;padding:6.5px;color:#FFFFFF;text-decoration:none;}
       .topnav li a {background:none; }
       .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#FFFFFF; color:#E27100;-moz-border-radius: 8px;

    -webkit-border-radius: 8px;

    border-radius: 8px;

}

 If you’d like to support my work and advice, just use the social bookmark options in the bar below and bookmark us!  And, if you enjoyed this post, please subscribe to our RSS feed.