An Ode To Border-radius

CSS | April 27th, 2009
An Ode To Border-radius Photo by numstead

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

Your Comments:

Have your say!

Note: * Denotes a required field (don't worry: your email will not be published)

Smashing Magazine Network