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
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 :-
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”
They own the data and the customer relationship totally.
This is because they want to make the customer’s wedding day the perfect photographic
day. This company is always looking forward to making customer’s
friend jealous.
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!
Awesome Tutorial, Very Helpful post.
Thanks for the article – needed that for my left menu issie I’ve been having all day~
Great lesson & tips on Nifty Rounded Edges Using Only CSS. Thanks for your effort.
Excellent rounded edges jai! Thanks for posting.
The best tutorials.
I have google analytic account, i didnt know i can do this things with it, thanks for posting codes as well and options for download, really good work.
Great tips.. Works fine….. Thanks for sharing…
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.
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!
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>
These nifty corners are nifty alright, but my curiousity has the better of me. Can you explain “how” they work…
Very good, thanks 🙂
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.