Nifty Rounded Edges Using Only CSS
Written by Jai on May 10, 2008 – 1:25 pm - 9,145 viewsIf 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. 
If you enjoyed this post, make sure you subscribe to my RSS feed!
28 Responses
to “Nifty Rounded Edges Using Only CSS”
6 Trackback(s)
- May 11, 2008 : jaehong75.com : links for 2008-05-11
- May 11, 2008 : ??????????? ?????? ????????? ?? CSS. | MishaSite.net
- May 12, 2008 : CSS Guides and A Free PS3 « twodayslate
- May 13, 2008 : AK47 » links for 2008-05-14
- May 17, 2008 : Bilgi Foto?raf Resim Güncel Meseleler » Blog Archive » Seçme Blog Yaz?lar? – 2
- May 23, 2008 : Do I read your Blog?
on May 10, 2008
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.
on May 10, 2008
You can also use this:
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
on May 10, 2008
This is awesome. Thank you!
on May 11, 2008
Thank you. This is great! It has made life a lot easier.
on May 11, 2008
Thanks jai. Another knowledge gained.
on May 11, 2008
You are too much Jai. You giving us free lesson. LOL.
Thank you thank you.
on May 12, 2008
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.
on May 12, 2008
Great Job Jai
This is a pretty amazing blog…
on May 12, 2008
Very good, thanks
on May 15, 2008
These nifty corners are nifty alright, but my curiousity has the better of me. Can you explain “how” they work…
on May 15, 2008
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
on May 15, 2008
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>
on May 16, 2008
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!!
on May 18, 2008
so cute the method
on May 19, 2008
Cool! Thanks for the info. I’ll bug my husband to implement this for me.
on May 21, 2008
Awesome! That is a nifty trick!
on May 25, 2008
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!
on Jun 20, 2008
awesome css tips! thanks for sharing.
on Aug 4, 2008
Very nice blog. Really this article very interesting.
i like this.
on Aug 11, 2008
CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm
on Aug 31, 2008
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.
on Nov 20, 2008
Hello, here is another site, no images 1px 3px or no borders.