WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0

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

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. Tina Wang left a comment on March 28, 2016 at 11:33 pm |

    PU gasket sealing equipment
    It can meet the demands of different manufacturer tablet and notch glues. Besides, it also has one-button switching function on the computer for the convenient of customer use.
    http://www.hgcx.cn/en/index.php

  2. editing photo for free left a comment on September 23, 2014 at 8:07 am |

    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.

  3. Reviews On Make Women Want You By Jason Capital left a comment on August 10, 2014 at 10:05 pm |

    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!

  4. VPS Hosting Queensland left a comment on August 13, 2012 at 1:56 am |

    Awesome Tutorial, Very Helpful post.

  5. Ron left a comment on September 6, 2011 at 5:10 pm |

    Thanks for the article – needed that for my left menu issie I’ve been having all day~

  6. Web Development Australia left a comment on August 17, 2011 at 1:21 am |

    Great lesson & tips on Nifty Rounded Edges Using Only CSS. Thanks for your effort.

  7. Creative Designs left a comment on April 18, 2011 at 12:21 am |

    Excellent rounded edges jai! Thanks for posting.

  8. Sameer left a comment on September 3, 2010 at 4:03 am |

    The best tutorials.

  9. Star Config left a comment on January 16, 2010 at 6:20 am |

    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.

  10. Krishna Kumar left a comment on September 27, 2009 at 7:27 am |

    Great tips.. Works fine….. Thanks for sharing…

  11. Css Rounded Corners left a comment on November 20, 2008 at 11:10 am |

    Hello, here is another site, no images 1px 3px or no borders.

  12. john left a comment on August 31, 2008 at 9:29 pm |

    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.

  13. Optik Kablolar left a comment on August 11, 2008 at 2:31 pm |

    CSS “Cascading Style Sheets” Lessons
    css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

  14. Pitter left a comment on August 4, 2008 at 1:23 am |

    Very nice blog. Really this article very interesting.
    i like this.

  15. sukandia.com left a comment on June 20, 2008 at 5:48 pm |

    awesome css tips! thanks for sharing.

  16. teddY left a comment on May 25, 2008 at 9:54 am |

    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!

  17. Jeremiah left a comment on May 21, 2008 at 8:57 am |

    Awesome! That is a nifty trick!

  18. MyGoodFinds left a comment on May 19, 2008 at 6:57 pm |

    Cool! Thanks for the info. I’ll bug my husband to implement this for me.

  19. leaveoff left a comment on May 18, 2008 at 11:25 am |

    so cute the method

  20. Tech Blog left a comment on May 16, 2008 at 12:08 pm |

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

  21. geroyche left a comment on May 15, 2008 at 4:34 pm |

    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>

  22. geroyche left a comment on May 15, 2008 at 4:33 pm |

    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

  23. VirtualOdin left a comment on May 15, 2008 at 12:44 am |

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

  24. Geoffrey left a comment on May 12, 2008 at 7:07 pm |

    Very good, thanks 🙂

  25. Marineguyfla left a comment on May 12, 2008 at 4:32 pm |

    Great Job Jai
    This is a pretty amazing blog…

  26. kahpeng left a comment on May 12, 2008 at 10:06 am |

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

  27. papajoneh left a comment on May 11, 2008 at 9:26 pm |

    You are too much Jai. You giving us free lesson. LOL.
    Thank you thank you. 😀

  28. Cosmoslayer left a comment on May 11, 2008 at 8:28 am |

    Thanks jai. Another knowledge gained. 🙂

  29. Jasmin left a comment on May 11, 2008 at 4:56 am |

    Thank you. This is great! It has made life a lot easier.

  30. Joy left a comment on May 10, 2008 at 11:47 pm |

    This is awesome. Thank you!

  31. Alex left a comment on May 10, 2008 at 7:15 pm |

    You can also use this:

    -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;

  32. Richard H left a comment on May 10, 2008 at 4:40 pm |

    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 Comment

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

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project