Nifty Rounded Edges Using Only CSS

Published On May 10, 2008
29 Comments Leave a Comment

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 :-

CSS Rounded Tips

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

Here is the HTML needed. This goes in the body of your HTML file. :-

HTML

Once you have copied the above pieces of code into your HTML file and when you run it, you should see something like this :-

rounded edges

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. 🙂

29 replies on “Nifty Rounded Edges Using Only CSS”

Today, I went to the beach with my children. I found a sea
shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed.
There was a hermit crab inside and it pinched her ear. She never wants
to go back! LoL I know this is completely off topic but I had to tell someone!

john Reply

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.

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!

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>

VirtualOdin Reply

These nifty corners are nifty alright, but my curiousity has the better of me. Can you explain “how” they work…

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. 😀

Alex Reply

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.

Leave a Reply to VirtualOdin Cancel reply

Your email address will not be published. Required fields are marked *