25 November, 2009

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.

1 comment:

  1. Cheers man. You may have posted it up in 2009, but still most relevant....and helpful;)

    ed

    ReplyDelete


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin