An ode to border-radius

27 April 2009, in CSS | 36 comments »

Ah! Border-radius: web designer’s sweetheart and (sadly) the one that IE8 forgot, destroying many a web designer’s dreams. In this post I’m going to explain how it works, what are some of the cross-browser alternatives, and showcase some websites that took a step ahead and implemented it.

What is border-radius?

Border-radius is a CSS3 property that makes possible to add curved corners to almost all HTML elements.

Many websites today use rounded corners as a way to break from the squared shape that most HTML elements have: it’s basically an easy way to add some softness to the designs.

Rounded corners can be seen, together with reflections, gradients and shinny things, as one of the plagues from the pseudo-Web2.0 look, but the truth is that, if used wisely, they can bring another life to an otherwise dull design.

How can border-radius improve CSS, markup, and development?

So how would the cross-browser implementation of the border-radius property help us web designers? I’m sure if you ever coded a website that had rounded corners for everything, you know the answer to this question!

Nowadays, to add rounded corners to an element, say a div, we will need at least one image (if the div has a fixed height and width). If we are creating an expandable div, for example the sidebar on a percentage-based website, we will need four images, one for each of our corners. We will also need at least four HTML elements to which we can attach those images to. That is a lot of dispensable markup, and a lot of development time to make sure it works and to create those images, at least compared to how fast it would be if we could only add a simple CSS property to the element.

But isn’t this just a minor annoyance and a matter of personal taste and design choice?, you may ask. Aren’t there more important things about CSS3 that we should be eager to be able to use?

Most definitely yes! There are far more important issues that could be solved were CSS3 implemented now. Just think about multiple backgrounds, @font-face or multi-column layouts. But the truth is that border-radius seems to be at the top of webdesigners’ lists, just look at the poll results on CSS Tricks.

Usage

To use border-radius today, we have to use proprietary (or vendor-specific) CSS code along with the original border-radius property. Vendors use these to test new properties that aren’t yet a standard.

Imagine you want a simple red box (div) with the id of one with some rounded corners. This is the code you’ll need to add to your div, to make sure both Safari and Firefox render the corners correctly:

div#one {
	width: 200px;
	padding: 20px;
	border-radius: 10px;
	-moz-border-radius: 10px; /* Firefox, or Gecko-based browsers */
	-webkit-border-radius: 10px; /* Safari, or Webkit-based browsers */
	background: #F00;
	margin-bottom: 10px;
	}

Now say you only want the top right and the bottom left corners to be rounded:

div#two {
	width: 200px;
	padding: 20px; 
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	background: #F00;
	}

It’s as easy as that! You could make things a bit simpler with some shorthand CSS, but it seems that browsers haven’t agreed on that matter yet.

Browser support

In a few sentences: none of the IE browsers available to date support border-radius (where’s the surprise in that?). Opera doesn’t support it either. Safari, Firefox, Camino and Konqueror (try using -khtml-border-radius) do (latest versions).

Some of the alternatives

When ignoring Internet Explorer isn’t an option, there are a lot of different solutions available out there to overcome IE’s limitations and implement rounded corners across an entire website easily.

In my opinion, the ones that use JavaScript to accomplish it tend to be the best ones, but there are a lot of CSS-only options too (check the links in the Further Reading section).

Here are some of the most popular ones:

Showcase

Let me tell you about finding websites that implement border-radius (and that look good doing it): it’s a tough and time-consuming task! I had to go through dozens (maybe hundreds) of websites to find a hand-full using them.

Twitter

Twitter's front page

Ignore the table-based design (which they have been updating, for what I can tell): they are using border-radius, for crying out loud! (As if I didn’t love Twitter enough by now…)

Virb’s Login page

Virb's login page

The rest of the website isn’t using border-radius, but this beautiful login form is (and their sign up form is too).

WordPress’s Admin Panel

Wordpress's admin panel - Dashboard

WordPress’s admin panel is a rounded corner feast: can you imagine how much time they saved just by using border-radius?

Tutorial9

Tutorial9's front page

Beautiful design, valuable content, and uses border-radius: they got me at “-moz”.

Quite a short list, right?

Most websites rely on images and bloated markup to accomplish the same results. I understand why, since I do it myself, but, wherever possible, I try and squeeze in a couple border-radius properties in my code. Dare I say it: you should too.

Conclusion

I confess: the main reason I wrote this post was because every time I have to implement cross-browser rounded corners I weep. This would be such a trivial task if only a simple CSS property was more widely used and implemented. And when I come across a website that took that one step further and implemented border-radius, I feel like doing a little dance. So this is my little dance!

What are your thoughts on this subject? Do you agree it would make our lives easier, or do you have more important things to worry about than just adding a little eye-candy to your websites?

Let me know if you’re also using border-radius on your website and I may add it to the (short) list.

You can see my example page and download the files, even though there isn’t a lot of content in them :)

View example Download source files

Further reading

There are 36 comments:

  1. Bastien says:

    So, now we’re all waiting for a webdesigner notebook design with rounded corners :)

  2. Yaili says:

    I’ll think about it… :)

  3. Shoghon says:

    I tell my clients that a rounded corner design is only applicable to modern browsers and then explain the concept of ‘graceful degradation’. As the round corners should be a subtle enhancement to the site and not the focus, they generally understand.

  4. inayaili says:

    That’s a good point, Shoghon, I wish more people would follow your example and took the time to explain their clients these web development concepts. People can understand more than we think they can.

  5. Anthony Hunt says:

    Thanks for sharing, great summary of implementation and execution.

  6. Jacob Rask says:

    For projects where I don’t need pixel-perfection in IE, I use the browser-specific CSS described above for Safari and Firefox, and then automatically generated SVG files for Opera.

    Other times, I try to use markup I already have (such as header tags for top corners) and CSS sprites to minimize the use of superfluous code and images.

  7. inayaili says:

    I think using markup you already have can be applied in some cases, but not in others. For example, if the content inside a container is content managed and you can end up having 2 or 3 headings there. Most of the times you just end up seeing 3 or 4 divs within each other, which looks scary.

    I’m all up for sprites though! :)

  8. David Hucklesby says:

    Various javascript solutions exist for IE using Microsoft’s proprietary VML. Sadly the one I have been using does not work in IE 8, so if someone has an alternative script, I’m all ears.

  9. I’m using round corners for “speech bubbles” in the comments of my blog. Sadly I don’t have many visitors yet… Be my guest!

  10. inayaili says:

    That’s great Pat! They look very nice.

  11. I definitely love border-radius, it’s a really useful css property. In my latest works I’ve used it as a progressive enhancement: IE users, I’m sorry :)

  12. Dennison Uy says:

    Alright, I’m convinced. I’m gonna start using rounded corners on my designs again. Maybe I’ll even start a new religion for rounded corners.

  13. Addicott Web says:

    This is a great article, thanks for posting it. I’ve been using the border-radius property on my website and a few of my designs for clients, and it really is quite simple to do and quite nice when it works well.

    I think whether or not you use it all depends on who your website’s audience is. For my own website, I know from looking at my Google Analytics data that most visitors are using Firefox to view. So, I don’t have to worry about the curved edges not rendering properly. For clients, however, if most of the visitors are viewing the website from IE instead, unfortunately we still have to use alternate ways of getting the rounded corners to appear .

  14. I’ve been slipping border-radius into some designs. My site uses it on the gallery div. This site: http://www.CraigHubbardMusic.com totally uses b-r. Client was fine with the idea that in compliant browsers the corners would be rounded and in IE, not.

    Of course, you won’t validate with b-r, but I think of this “error” as a badge of modernity!

  15. what a coincidence you wrote about this: I recently refused (and explained) the use of rounded corners with border-radius in one of my current client projects. Their main audience is using IE6 and IE7, what’s the point in using border-raidius if only 10% of their users is going to see it. The site is already heavy with JavaScript, so it wouldn’t make sense to add one more for rounded corners.

    Let’s hope the culprit browsers would catch up with border-radius in a not so distant future.

  16. inayaili says:

    @inspirationbit: In the case of your client, it wouldn’t make sense to use border-radius if most of their users are on IE, or if it really brings the quality of the overall interface down. But, for example, in cases like the WordPress admin panel, it’s a nice touch that is added to modern browsers, but the other visitors’ experience isn’t made worse by not having them.
    But I’m sure you already know that! :)

  17. André Luís says:

    Yeap, they’re starting to be pretty common. One thing, though. Firefox 2 and Chrome don’t render them anti-aliased, which sucks.

    Sometimes I wish every single browser had their own conditional comments for these kinds of things.

    One final argument. Some people might refrain from using it because it doesn’t provide cross-browser coherence. [1] I say fuck it. The user is not gonna change browser while seeing your page. And if they do, they’ll probably not even notice.

    Degrade as a form of punishment. “Get a (decent) browser, you!”

    [1] http://dowebsitesneedtolookexactlythesameineverybrowser.com/

  18. inayaili says:

    @André: Agreed – most users don’t even know of the existence of other browsers other than the one they use, let alone compare a website on 2 different ones.

    (Damnit! You just R-rated my site! :P)

  19. Keith Wicks says:

    I’m currently doing a big upgrade job on my Halo videogame website, including widespread use of CSS rounded corners. I’ll be happy to give you a link when it’s up and looking pretty!

    Meanwhile, a small query. I notice that you listed the non-specific code *before* the vendor-specific counterparts. Any particular reason for that, rather than putting it after?

    I’ll also make an observation. On my Mac, Firefox (3.0.9) is doing a far better job of rounded corners than Safari (3.2.1), in the case where there’s a 1 pixel border. Firefox renders the border crisply and with the same visual intensity as the side-lines, but Safari tends to blur it out somewhat and also mix in some of the interior colour. It can look quite an ugly mess, and hints of the interior colour can actually end up looking *outside* the fuzzy border. Surprising and disappointing from Apple; I hope they improve their rendering soon.

  20. inayaili says:

    Hey Keith,

    I had no particular reason to list the non-specific code before the others, I guess it would probably make more sense the other way around.

    It’s good to know that Safari 3.2.1 doesn’t render 1px borders that well, have you tested it on Safari 4?

  21. Keith Wicks says:

    I’ve had it the other way around so that the non-specific version ends up taking precedence, if supported. That’s just in case the effect is any different from some sort of experimental vendor-specific version – though I doubt it would be (I’m no expert though).

    As for Safari, it sounded like you were quite pleased that it was doing such a poor job! I think actually that wasn’t how you meant it, but it was funny. :) I haven’t tested on Safari 4 and don’t expect to either, so I don’t know if they’ve improved the rendering. It badly *needs* improving, because the current ugliness potentially negates the whole idea, namely to make things look nicer!

  22. Trisha Cupra says:

    Wow, cool. I just added them to my own website for a little bit of a face-lift. Now, if only IE would die.

  23. Jerry Seeger says:

    If it’s helpful at all, I have compiled a table comparing -webkit- and -moz- with the spec, including some shorthand options you don’t list here. You might find it handy. Worth remembering when you look at the table is that unreleased webkit builds mimic Mozilla almost exactly (except they specify the corners correctly).

    I read a note by an Opera developer that when they implement border radius they would either use -o-border-radius or straight-up border-radius if they thought the spec was stable enough. I’m hoping for the latter. It’s been a while since that comment, though.

    IE does not support SVG graphics, and fancy border-rendering will follow behind that, so it may be a while. (I’m betting the year 2054.) People who insist on using IE deserve to see slightly uglier Webs, as long as everything works right.

    Hope this is helpful.

    • Yaili says:

      Thanks, Jerry, that is indeed handy!

      Let’s hope Opera implements border-radius instead of -o-, but I’d be happy with either, to be honest, as long as it’s there.

  24. Zachariah says:

    Anything that lets me forgo one more little image (or ten), and possibly numerous extraneous divs, in a design to a achieve the desired look is super exciting in my book. Bring on the rounded corners, gradients, multiple background images, @font-face and box shadows.

  25. Kaido says:

    I love border-radius, box shadow and text-shadow and I use this one :) I know this doesnt work with all browsers and so what with some this works ;).. My examples are.. http://is.ee (This is under development now…) and http://jkvandra.ee

  26. Jerry Seeger says:

    Just at note to mention that Chrome 5 and Safari 5 work better without the -webkit- prefix, and indeed Opera 10.5 does not require a prefix either.

  27. inayaili says:

    Yes, as of Safari 5 there’s no need for the -webkit- prefix and it now accepts the shorthand, which is great. It still won’t accept percentages, however.

  28. Hi,
    I’m using border-radius for navigation tabs and for the hover-state of links, so they look like a button. Its easy and looks quite nice. The only problem for the moment are image-links, their behaviour is a unwanted and I could not find a solution yet.

  29. suraj says:

    Yes, as of Safari 5 there’s no need for the -webkit- prefix and it now accepts the shorthand, which is great. It still won’t accept percentages, however.

  30. Keith Wicks says:

    In my May 14th 2009 comment I promised to send you a link once I’d got my site upgrade done, but it skipped my mind, sorry! Better late than never I hope. There are many uses of border-radius and I’m pleased with the softened look. As an example page try http://www.badcyborg.net/Halo/Fun/Level2/RM/BattlePlans/PlateauFrontDefence.html, which in particular shows captioned thumbnail images with rounded corners (took me a while to figure out how to do that). I also use border-radius to get rounded corners on my dropdown menus plus a few other things, including when you hover over a typical link. Actually I introduced another use just yesterday, in making small symbols to indicate the presence of pictures or movies (e.g. see http://www.badcyborg.net/Halo/Fun/Level5/Index.html). Anyway, I hope my site makes a nice example for you.

    PS: My earlier remark about Firefox giving better rounded corners than Safari when there’s a 1 pixel border – such as with my thumbnails – continues to hold. Opera (10.60) is almost as good as Firefox but Safari is still much inferior.

  31. Keith Wicks says:

    That second link in my comment seems to have got mis-processed; a bracket is getting included on the end. Let me try again for you:
    http://www.badcyborg.net/Halo/Fun/Level5/Index.html

  32. richphitzwell says:

    I use this extensively and the results are beautiful except a couple of things. Chrome has a bug that doesn’t contain the border shadow within the radius and moz seems to lose alot of performance. Its really odd, but it seems moz continues to calculate over and over.
    Safari and Opera performance degrades slightly but chrome just isn’t effected.

    Sadly IE9 actually does a pretty good job at rendering, but its performance degrades beyond usability.

    The way I have tested is to add the code and take it away and you can see the difference. Personally I would be happy if moz fixes their issue and let IE die but thats another story.

  33. Michael says:

    I love border-radius especially with some drop shadow. As someone who is just getting started, I realize that it is easy to get carried away and also that some new thing will come along and supplant it. I have learned so much from this site and many others about css that I prefer to use it whenever possible instead of images. Really speeds up the development and the page loading.
    In my opinion pages just look more elegant and professional with touches like this.

  34. Michael says:

    Oh and since this is not my “full time job” no one is forcing me to support IE right now. I have been using blueprint css instead of coming up with my own cross browser tweaks for now. I finally “get” standards or at least the need for them. My current favorite browser is Chrome. I used to love Firefox but it has become somewhat bloated, still great for developers though.

  35. dhwang says:

    Have you seen this one? http://css3pie.com/

Leave a comment: