Rounded corners with CSS

Posted by David on 3 March 2010 | 79 Comments

Tags: , , ,

Rounded corners are very commonplace in web design today. It is so common that the authors of the CSS 3 spec have decided to include it in the upcoming standard. Most browsers aren't supporting CSS 3 yet, but both the Gecko and Webkit rendering engines have had their own version of rounded corners CSS rules for a while now. It is a lot less work to simply apply a CSS rule to an element than to do it with images, so often recently I have been taking this approach. It doesn't work for IE. Internet Explorer users won't get the rounded corners. The corners are just a little added bonus to my users with the better browsers.

To round the corners on an element you need the following CSS:

For Gecko (Firefox):

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;


For Webkit (Safari, Chrome):

-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;


The CSS 3 version (for future browsers that will support it)

border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;


Shorthand

Above are each of the corners spelled out. You can use shorthand if you want all the corners to have the same radius.

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;


Putting it all together

This is the code for all the browsers combined. Copy this code into your own CSS and change or remove the corners you don't want rounded.

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;


Post your comment

Comments

  • I was extremely pleased to find this website. I wanted to thank you for the good understand I definitely enjoying every single small bit of it and We’ve you bookmarked to check out new stuff you post.

    Posted by jack wills gilet, 05/02/2012 6:08am (2 days ago)

  • Thanks for your information and I am glad to know about these posts.

    Posted by Anaheim Hills Personal Training, 04/02/2012 4:05am (3 days ago)

  • Nowadays, <a href="http://www.cheapluggages.com">cheap luggages</a>, <a href="http://www.mypurseshandbag.com">cheap purses</a>, <a href="http://www.pursesbackpack.com">cheap backpack</a> and <a href="http://www.wholesale-wallets.com">wholesale wallets</a> are hot selling in many online stores. As a wholesaler of <a href="http://www.mypurseshandbags.com">purses handbags</a>, here is famous for selling <a href="http://www.mypursehandbags.com">wholesale juicy couture handbags</a>, <a href="http://www.wholesale-chanel-handbags.com">wholesale chanel handbags</a>, <a href="http://www.wholesale-coach-handbags.com">wholesale coach handbags</a>, <a href="http://www.wholesale-gucci-handbags.com">wholesale gucci handbags</a>, <a href="http://www.wholesale-louis-vuitton-handbags.com">wholesale louis vuitton handbags</a> and <a href="http://www.bagsway.com">cheap dolce and gabbana handbags</a> and many customers grab time to buy their favorites at a large discount price. Hence, why are you still hesitating for? Pick out your favorite <a href="http://www.cheappursesshop.com">purse bags</a> here.

    Posted by cheap purses, 31/01/2012 12:12am (8 days ago)

  • They are awesome to watch and it’s important to reflect this in the footage.

    Posted by Abercrombie Fitch Düsseldorf, 16/01/2012 1:22am (22 days ago)

  • What a fun pattern! It's great to hear from you and see what you've sent up to. All of the projects look great! You make it so simple to this. Thanks

    Posted by Abercrombie & Fitch Düsseldorf, 16/01/2012 1:19am (22 days ago)

  • However, most other Australians would only put them under across the home or around the most just on a holiday for that regional shop.Communication,Personal computers,Female Entrepreneurs The UGG Sundance Boots Chestnut are particularly comfy,made with the very best twin-faced sheepskin and capabilities a removeable/replaceable fleece insole and also a mylar lining providing you with additional warmth.The genuine fleece sock liner suggests premium comfort and warmth and the cow suede toe and ugg boots outlet heel bumper provide durability and abrasion resistance. On the other hand as a result of trademark issues, Uggs are far more usually these days regarded inside the retail world only as Sheepskin Boots. On the other hand an American Importer (Koolaburra) presented the notion that the name Ugg originates from the way in which uggs sale usa the boot "hugs" the wearer's foot and legs.

    Posted by cheap coach, 11/01/2012 8:01pm (27 days ago)

  • Swimmers and surfers also found the item in the 1960s and took to sporting them in public even nevertheless the boots had earlier only been worn around the property.Even although one particular would consider lined sheepskin is incredibly sizzling, the way they enable air to circulate prevents feet from overheating. and impressed California surfers. Sheepskin footwear has long been well-known in the rural locations of Australia, and its recognition improved as the solution was discovered by surfers and other folks. Even people who don't personal a pair identify the models and make.

    Posted by miu miu shop, 09/01/2012 1:27am (29 days ago)

  • If you are hunting for a magnificent pair that is ready to continue to keep your feet warm and dry all over the winter, UGG boots need to be your perfect alternative.

    Posted by mulberry sale, 05/01/2012 9:22pm (1 month ago)

  • Whether you want a sleek lower or a hood on your jacket, Moncler has made sure that you have what you want.Always worry the sky high price for winter coats? So why not buying right now during the discount season? Last winter is gone, but this winter will coming, now is the most effective time to buy the winter clothing for this winter due to the fact many brands begin to promote the last season clothing, if you can buy a brand clothing at a low discount, you will save much money for this winter, somebody will say that the last clothing will be ouedate in this winter, I can tell you that, Monclerjackets will solve this problem for you personally since of it's classical style.

    Posted by miu miu official website, 03/01/2012 9:22pm (1 month ago)

  • Whether you want a sleek lower or a hood on your jacket, Moncler has made sure that you have what you want.Always worry the sky high price for winter coats? So why not buying right now during the discount season? Last winter is gone, but this winter will coming, now is the most effective time to buy the winter clothing for this winter due to the fact many brands begin to promote the last season clothing, if you can buy a brand clothing at a low discount, you will save much money for this winter, somebody will say that the last clothing will be ouedate in this winter, I can tell you that, Monclerjackets will solve this problem for you personally since of it's classical style.

    Posted by miu miu official website, 02/01/2012 10:58pm (1 month ago)

1 2 3 4 5 6 7 8 next »

RSS feed for comments on this page | RSS feed for all comments