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. 
Cool! Thanks for the info. I’ll bug my husband to implement this for me.
so cute the method
i am not much of a graphic artist and i hate doing graphics…i am more of a programmer but this certainly is nice piece of CSS and would be very helpful when it comes to tweaking a theme or two…thanks man….made stuff a little lucid!
Cheers!!
ah… no html comments allowed. once sec…
<html>
<head>
<style>
<!–
ul {
width:180px;
list-style-type:none;
margin:0 auto;
padding:0;
}
li {
display:block;
position:relative;
border-width:1px 0;
border-color:#ccc;
border-style:solid;
margin:4px 1px;
}
li a {
display:block;
position:relative;
margin:0 -1px;
border-width:0 1px;
border-color:#ccc;
border-style:solid;
background-color:#eee;
padding:2px 6px;
color:#555;
text-decoration:none;
}
li:hover {
border-color:#aaa;
}
li a:hover {
border-color:#aaa;
color:#333;
background-color:#ddd;
}
//–>
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
great tip, caught me off-guard
however i made a few changes that produce semantically more sensible code i think. only problem is that unlike firefox and opera, ie doesn’t support :hover on li and thus the horizontal borders do not get darkened.
Home
About
Products
Services
Contact
These nifty corners are nifty alright, but my curiousity has the better of me. Can you explain “how” they work…
Very good, thanks