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;
You can use different possible combinations of topleft, top-left, bottom-right, bottomright etc
This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.
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.
#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;
}
#navwrap {margin:auto; width:560px; float:left;}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.
.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;}
Cheers man. You may have posted it up in 2009, but still most relevant....and helpful;)
ReplyDeleteed