Using Rounded Corners with CSS3

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page.

As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

Browser Specific Options

Through the use of proprietary CSS properties, certain browsers can already display rounded corners. For example, Firefox uses the -moz-border-radius property to control the corner radius of a page’s border. Safari can accomplish the same result with the -webkit-border-radius or -khtml-border-radius properties.

To give a 5 pixel border radius, the proprietary CSS property would look like:

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

Since proprietary CSS properties do not affect every web engine, you’ll need to include one for each browser family supported.

Cross Browser Considerations

Until more browsers begin to support CSS3, these options are a good way to increasing backwards compatibility with pure CSS. If you’re wondering how specific browsers handle the specification, this table has the results organized nicely.

Border Radius in Action

Let’s go through a quick example in border-radius usage. Since CSS3 has not yet been finalized, we’ll be including the proprietary options mentioned above too.

To keep things simple, we’ll make the targets of our experiment basic div elements. You can see the results of both together on the demo page.

Four Corners

This style will results in a box with four equally rounded corners.

.content-box{border:1px solid #AFAFAF; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius:5px; -khtml-border-radius:5px;}

Two Corners

This style will result in a box with only the top two corners rounded

.specific-box{border:1px solid #000; border-radius:5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;}

Keep in mind that even though border-radius is not yet supported by all browsers, it doesn’t hurt to include it anyways. This will help ensure that you have forward compatibility. Browsers with CSS3 support will use the property, while the rest will just ignore it.

Further Reading

  1. Why Do We Love Rounded Corners?
  2. The W3 CSS3 border-radius property
  3. Table of CSS3 border-radius Compliance
  • Stumble It!
  • Bookmark It!
  • Tweet it!

About Zach Dunn

Zach is a partner and interface designer at One Mighty Roar from Massachusetts, USA. Follow him on Twitter @zachdunn.

 

Discussion

  1. Eric B.

    October 26th, 2009 at 12:11 AM

    KHTML has border-radius? Now I need to start testing my sites in Konqueror.
    .-= Eric B.´s last blog ..Creating an Awesome Website Design With Gimp =-.

  2. dhenk

    October 26th, 2009 at 12:22 AM

    How if displayed on IE..? I make one like that and didn’t work on IE… Any thought..?

  3. Zach Dunn

    October 26th, 2009 at 12:26 AM

    @dhenk

    Internet Explorer has no native border radius support. Since having rounded corners is not essential most design, you’ll want to have it gracefully degrade instead.

    For further reading, I recommend this article on the issue. It seems to give a few good links.

  4. dhenk

    October 26th, 2009 at 12:29 AM

    @Zach
    I’ve already make a design for my blog using rounded corners, and maybe I’ll use the img just for solving this problem. Thank you for the link provided … :-)

  5. sideshow

    October 26th, 2009 at 2:56 AM

    What is a “radois”? ;)

    -webkit-border-radois: 5px;

  6. hans

    October 26th, 2009 at 5:01 AM

    when will IE support it? i sometimes use it and it would be great if more people could see the rounded corners. i have seen that many people use 2 or 3px so that the difference is not too muxh, good idea.

  7. rasmus

    October 26th, 2009 at 5:22 AM

    Personally we normally use slightly rounded corners for Safari and Firefox. Internet Explorer people probably won’t mind anyways, since they apparently done give a flying f**k about eyecandy anyways (according to their choice of browser). ;)

    Hope to see Internet Explorer builds with CSS3 support in the future though – and maybe a standard name for it instead of 3 different ones.

  8. rl_creative

    October 26th, 2009 at 10:27 AM

    Cool, CSS is becoming more powerful :)
    Sad, that IE doesn’t want to support those corners, cause I’m the only web-designer in our company and my boss just doesn’t understand, that IE is a f**king browser and it’s is just impossible to do things look in it as good as they look like in Firefox or Safari. So, I won’t be able to use this CSS3 anyway, till it will be fully suported by IE :D
    .-= rl_creative´s last blog ..20 Awesome websites with extraordinary and mind-blowing content =-.

  9. Inside the Webb

    October 26th, 2009 at 10:48 AM

    Really nice article on rounded corners, great to see CSS3 adding such impressive techniques!
    .-= Inside the Webb´s last blog ..Interview with ThisWebHost – An Impressive new Web Hosting Company =-.

  10. Andy

    October 26th, 2009 at 12:13 PM

    Just noticed last week that Chrome doesn’t support the shorthand method of border-radius to specify values for each corner (ie. 5px 5px 0 0). You have to set the values for -webkit-border-top-left-radius and -webkit-border-top-right-radius.

  11. A u d e e

    October 26th, 2009 at 6:36 PM

    Hmm… could it be the Opera v.10 browser also has no native border radius support?
    Because I see this isn’t work on Opera.
    .-= A u d e e´s last blog ..COLOURlovers: It’s Coffee Time! =-.

  12. Web Design Maidstone

    October 26th, 2009 at 8:10 PM

    Will do some testing, still using images at prsent to be on the safe side

  13. Jerry Seeger

    October 27th, 2009 at 2:03 AM

    Thanks for the link! I got so many hits on that table last night that my Web Host shut me down for a while. I hope the table is useful to folks; it would justify all the hours I spent reading the spec and coding up svg images. If only Internet Explorer supported svg…
    .-= Jerry Seeger´s last blog ..Why Mazda Should Pay Me To Go On Road Trips =-.

  14. krike

    October 27th, 2009 at 3:26 AM

    I think I have seen a quick tip on themeforest blog or nettuts on how to create cross-browser rounded corners using a jquery plugin. it would still require javascript to be enabled but would still be nice to implement it. especially if you only need a few lines of code to do the trick.

    here’s a link to a jquery plugin http://www.malsup.com/jquery/corner/

    hope it helps someone :)

  15. Landish

    October 27th, 2009 at 3:39 AM

    @Zach you mentioned, that Safari can do same with webkit or khtml properties. Why did you use both of them in your examples? Couldn’t we just use one of these?

  16. BEBEN

    October 27th, 2009 at 6:40 AM

    this script if check in the check web broken link’s…is broken. Thanks for share
    .-= BEBEN´s last blog ..Semua tentang Google page rank =-.

  17. AtiKuSDesign

    October 27th, 2009 at 8:15 AM

    I’m massively into CSS3 at the moment as well as HTML5.

    The only sticking point is with the client. It’s important to educate them to the fact that web sites don’t have to look identical in every browser.

    Some of them just don’t get that yet

  18. Jani

    October 27th, 2009 at 10:19 AM

    I saw one trick to make this work in Internet explorer too. Just three line css and an htc file.

    http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

  19. Zach Dunn

    October 27th, 2009 at 11:52 AM

    @Jerry

    Sorry about your server. Your table was just too useful to not share.

    @Landish

    Even though I haven’t experienced a case where you need khtml over webkit, I demonstrated it as an option to be on the safe side.

  20. Matthew Westrik

    October 27th, 2009 at 5:23 PM

    Odd. Opera doesn’t seem to support it either.

  21. Vijay Sharma

    October 28th, 2009 at 8:00 AM

    @Jani

    htc file “you may be refering to nifty-corners”. this works great but with errors in IE6 plus it also degrades the site performance.

    I like the idea of graceful degradation. :)

  22. Montana Flynn

    October 28th, 2009 at 6:02 PM

    In safari 4 your two corner example in the demo didn’t work.
    .-= Montana Flynn´s last blog ..Automate 404 discovery, the easy PHP way. =-.

  23. Montana Flynn

    October 28th, 2009 at 6:08 PM

    It is better to style 1-3 corners using the longhand for safari’s sake.

    This is the syntax in safari:
    -webkit-border-bottom-right-radius: 5px;

    And in Firefox:
    -moz-border-radius-bottomright : 5px;

    Add them together to get decent coverage of the browsers that support border-radius:
    .-= Montana Flynn´s last blog ..Automate 404 discovery, the easy PHP way. =-.

  24. Vijay Sharma

    October 29th, 2009 at 8:05 AM

    does “border-radius” support in IE8? Haven’t checked yet.

  25. Jack

    October 29th, 2009 at 11:35 AM

    No, I tested in my IE8, it’s not there, in Safari 4.0, only the example of four corners is working.

  26. Vijay Sharma

    October 30th, 2009 at 12:59 AM

    @Jack

    Thanks

  27. DaD0n

    November 1st, 2009 at 5:00 AM

    luv it!

  28. Tommie

    November 7th, 2009 at 8:03 PM

    Problem is that CSS3:s border radius isn’t really useful and the IE-hacks to get rounded corners are so bloated its scary unfortunately. :/

    You should instead write evertything about getting it cross browser…. (and good!) but that is a bit harder. :)
    .-= Tommie´s last blog ..Signs: The Secret to Getting Results from Your Advertisement Sign =-.

  29. Montana Flynn

    November 11th, 2009 at 5:32 PM

    Tommie, to get it cross browser you could add a small jquery plugin for IE only using conditional comments.

    Really though, who cares about IE. IMO they can see square corners and everyone who uses a decent browser gets to see the nice rounded corners.

    Also using rounded corners is very useful for low budget sites since you don’t need to open up photoshop for every rounded corner!
    .-= Montana Flynn´s last blog ..Automate 404 discovery, the easy PHP way. =-.

  30. Tommie

    November 21st, 2009 at 4:56 AM

    Montana: Hm — ok? The jQ-plugin(s) in existence is bloated and who cares about IE? Well… all the 50%+ users using it maybe? :)

    And since when did border radius have anything to do with budget? It’s more expensive if any. :)

  31. Extend Studio

    November 27th, 2009 at 6:34 AM

    You might also want to have a look at FlexiPanels CSS – a Dreamweaver extension that makes rounded corner CSS boxes from a picture.

  32. Josh

    December 5th, 2009 at 11:20 AM

    I’ve been using border-radius on form buttons. If you set the border-radius high enough, the two rounded corners come together to from an ellipse.

  33. böcek ilaçlama

    December 8th, 2009 at 5:12 AM

    perfect is rounded css :)

  34. novi

    December 10th, 2009 at 1:41 AM

    sometimes, appearance of a website is different between one browser and other..
    any explanation?
    is it refers to uses of css?
    thanks for answering :)

  35. ali

    December 16th, 2009 at 12:11 AM

    nice .. worked on firefox very well .. but not with IE8.. thank you very much Zach.

  36. Java developer

    February 6th, 2010 at 5:22 PM

    Nice tut. Thanks

Join the Conversation!

Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.

CommentLuv is Enabled

 

Sponsors

Advertise on Build Internet!