Nifty Rounded Edges Using Only CSS
If you have a Google Analytics account, you must have seen that Google uses slightly rounded edges in the menu buttons on the left. See the picture below :-
Today, I will teach you how to give these nifty little rounded edges to your menu. Given below is the CSS code. This goes into the head section of your HTML file. :-
CSS
<style>
ul {
width:180px;
list-style-type:none;
margin:0 auto;
padding:0;
}
li a {
display:block;
position:relative;
border-width:1px 0;
border-color:#ccc;
border-style:solid;
color:#555;
text-decoration:none;
margin:4px 1px;
}
li a span {
display:block;
position:relative;
margin:0 -1px;
border-width:0 1px;
border-color:#ccc;
border-style:solid;
background-color:#eee;
padding:2px 6px;
}
li a:hover {
border-color:#aaa;
color:#333;
}
li a:hover span {
border-color:#aaa;
background-color:#ddd;
}
</style>
Here is the HTML needed. This goes in the body of your HTML file. :-
HTML
<ul>
<li>
Home
About
Products
Services
Contact
</li>
</ul>
Once you have copied the above pieces of code into your HTML file and when you run it, you should see something like this :-
So, you can see that these rounded corners can be created without using any kind of images. You can download the source file here :- Download
Please let me know if you have any problems or just leave comments if you like it. 
Great Job Jai
This is a pretty amazing blog…
Thanks for the good tips! Previously your tips for changing header images is good and simpe. I help my friend to setup his anime blog’s header images.
You are too much Jai. You giving us free lesson. LOL.
Thank you thank you.
Thanks jai. Another knowledge gained.
Thank you. This is great! It has made life a lot easier.
This is awesome. Thank you!
You can also use this:
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Sweet&8212;thanks Jai.
My current theme uses these nifty CSS corners, but I’m not fancy on the precisely how they’re implemented.
I’ve been planning on cleaning up the code, for reuse in other places, and you’ve just made my job easier.
Thanks again.