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. 
Hello, here is another site, no images 1px 3px or no borders.
No disrespect but please check your code before posting. It does not work as is. It does not contain hyperlink tags (a href) and also does not work in IE 7 or FF 3. Too many things missing, please test before posting bro.
CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm
Very nice blog. Really this article very interesting.
i like this.
awesome css tips! thanks for sharing.
Thank you so much for sharing this interesting CSS styling. I’ve never knew that the Google designers have opted for pure CSS instead of images for the rounded corner design. The 1px indentation at all four corners is an interesting way to trick the human eye into thinking that it’s a rounded corner
amazing!
Anyway I’ve been looking through the source code of GMail as well the other day, and realised that they’re using a single circle (instead of four separate images) for all four rounded corners of the content container. Now that’s another interesting thing!
Awesome! That is a nifty trick!