Using Rounded Corners with CSS3

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:

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.

Two Corners

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

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

Posted Sunday, October 25th, 2009 · Back to Top

SPONSOR

Add Comment

56 Comments 87 Mentions

  1. Eric B. Author Editor

    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 Author Editor

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

    ·

    • Zach Dunn Author Editor

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

      ·

      • Gajendra Author Editor

        i ask a question border radius shadow and gradient how can work in IE 7 8 & 9
        can you help me how can this css3 property work in IE browser

        ·

  3. dhenk Author Editor

    @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 … :-)

    ·

  4. sideshow Author Editor

    What is a “radois”? ;)

    -webkit-border-radois: 5px;

    ·

  5. hans Author Editor

    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.

    ·

  6. rasmus Author Editor

    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.

    ·

  7. rl_creative Author Editor

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

    ·

  8. Inside the Webb Author Editor

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

    ·

  9. Andy Author Editor

    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.

    ·

  10. A u d e e Author Editor

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

    ·

  11. Web Design Maidstone Author Editor

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

    ·

  12. Jerry Seeger Author Editor

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

    ·

  13. krike Author Editor

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

    ·

  14. Landish Author Editor

    @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?

    ·

  15. BEBEN Author Editor

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

    ·

  16. AtiKuSDesign Author Editor

    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

    ·

  17. Jani Author Editor

    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

    ·

  18. Zach Dunn Author Editor

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

    ·

  19. Matthew Westrik Author Editor

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

    ·

  20. Vijay Sharma Author Editor

    @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. :)

    ·

  21. Montana Flynn Author Editor

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

    ·

  22. Montana Flynn Author Editor

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

    ·

  23. Vijay Sharma Author Editor

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

    ·

  24. Jack Author Editor

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

    ·

  25. Vijay Sharma Author Editor

    @Jack

    Thanks

    ·

  26. DaD0n Author Editor

    luv it!

    ·

  27. Tommie Author Editor

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

    ·

  28. Montana Flynn Author Editor

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

    ·

  29. Tommie Author Editor

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

    ·

  30. Extend Studio Author Editor

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

    ·

  31. Josh Author Editor

    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.

    ·

  32. böcek ilaçlama Author Editor

    perfect is rounded css :)

    ·

  33. novi Author Editor

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

    ·

  34. ali Author Editor

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

    ·

  35. Java developer Author Editor

    Nice tut. Thanks

    ·

  36. Baseball Guy Author Editor

    I wish IE would get around to implementing this!

    ·

  37. sivaranjan Author Editor

    Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.

    ·

  38. John Media @ server hosting Author Editor

    I have known those techniques on how to make use of round edges ages ago but I’d say you really helped a lot of web developing starters out there. I’d give you a thumbs up for this ^^,

    ·

  39. volkan Author Editor

    css 3 & html 5 & jquery future stars :)

    ·

  40. Brian Author Editor

    this is great & i have used it on the top corners for the banner of a site i’m currently building. however, the only issue that i’m running into is how do i then link up that banner to the home page?

    ·

  41. Böcek ilaçlama Author Editor

    I wish IE would get around to implementing this!

    ·

  42. FelixFett Author Editor

    Hello everyone1 – I found better solution ( for all ie too!) – just go to the apple.com and see their style.css – all border-radius (ie & opera working delicious!)

    There is some more solutions like this one: http://www.cssnewbie.com/download/jquery.support.borderRadius.js

    ·

  43. Artesano Author Editor

    I’d give you a thumbs up for this!!

    ·

  44. L7 Author Editor

    I tried implementing the rounded corners for a menu tab, which is set against a background image, and the corners ended up having dark triangles at the edge of the rounded corner, instead of it being transparent and letting the background image show through. How do I fix this?

    ·

  45. web designing uae Author Editor

    css 3 & html 5 & jquery future stars :)

    Agree with you volkan.

    ·

  46. jampa Author Editor

    really sound interesting……………

    ·

  47. Cherry Author Editor

    Merry meet, merry part.

    ·

    • sdsfs Author Editor

      which have aleardy which have aleardy started to be supported in Firefox, Google Chrome & Safari. (description)WTF are you new at this??You can also do this in CSS for IE8 and Opera

      ·

      • Artesanos Author Editor

        Great links, thank you for compiling this list.

        ·

  48. Graphicbaz Author Editor

    Thanks a lot man.

    ———————————-
    HaMiD Fadaei
    * – Web Designer
    * – Graphist
    * – Web Programmer
    * – Expert in SEO & Page Rank
    * – WordPress Template Designer
    Delhamid.Alex@Gmail.com

    ·

  49. Monster – Beats by Dr Dre Pro Performance Professional – Black Sale Author Editor

    Hey there, You’ve done a fantastic job. I’ll definitely digg it and personally suggest to my friends. I’m sure they will be benefited from this website.

    ·

  50. Monster – Beats by Dr Dre Studio – Nike Kryptonate Limited Edition Headphones Author Editor

    I enjoy you because of your whole work on this website. Kim loves working on investigations and it’s really easy to understand why. I hear all about the compelling mode you render sensible ideas through your web blog and as well as boost contribution from people about this point so our own girl is learning a lot of things. Enjoy the rest of the new year. You are always conducting a wonderful job.

    ·

  51. mamun005 Author Editor

    I am trying to do something on round border with css property which link http://www.webinbangla.com/2012/05/css-round-shape/

    ·

  52. james at uk deals Author Editor

    Dear All,

    If i create a curved shape menu with fad in effect menu does it work in ie???

    ·

 

Build Internet by One Mighty Roar. Since 2008.