CSS 3: Border Radius

It’s probably one of the most long awaited CSS properties and I’ve no doubt it will be used to death when it is finally more widely supported in browsers. Border Radius can be used to amazing effect in web design & when used properly gives that little bit of ‘Je Ne Sais Quoi’ to your website.

Note: To view some of the examples in this post you will need a Mozilla browser like Firefox. To view others you will need a Webkit browser such as Google Chrome or Safari. IE and Opera will not be able to see them, however Opera does support the border-radius property in newer versions.

Border Radius: The Syntax

The syntax of Border Radius is tricky right now because of certain browsers not supporting it. While the value syntax is just like any other CSS property, the property itself is slightly different. Let’s take a look at an example:

As you might have guessed -moz-border-radius is for Mozilla based browsers such as Firefox, while -webkit-border-radius is for browsers using the Webkit engine such as Safari & Google Chrome. border-radius is the proposed standard for border radius once it is standardized and support is available throughout all the browsers. According to the Opera development site border-radius works in Opera, but I haven’t been able to personally confirm this.

While the code example above shows how to set a symmetrical border radius, what if you want to set different radii for each corner. Well it’s tricky as each browser does that differently.

Border Radius: Mozilla Specific Options

Let’s start with Mozilla (Firefox).

Let’s look at some live examples for those. Remember these examples are Mozilla specific and will only show correctly in a Mozilla browser with Border Radius support such as Firefox.

-moz-border-radius: 12px;

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

topleft & topright: 9px / bottomleft & bottomright: 7px

Border Radius: Webkit Specific Options

Let’s have a look at some live examples for these. This time you need a Webkit browser or these examples won’t show correctly. Safari & Google Chrome are both Webkit browsers.

-webkit-border-radius: 12px;

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

topleft & topright: 9px / bottomleft & bottomright: 7px

Border Radius: Graceful Degradation Tips

To be honest there isn’t much you can do with regards to degradation with Border Radius. While it’s tricky I would recommend, if you are going to use rounded corners, making a design in which square corners look okay but rounded ones look better. That way browsers that don’t support Border Radius, currently IE I believe, still see your site in a respectable manner.

One way you could enable rounded corners, in Internet Explorer at least, is to use one of the various JS scripts to create them on-the-fly. However In my opinion they create too large a loading overhead to bother with. Another alternative is to use images & HTML, but you are using Border Radius to avoid using those kinds of hacks and it therefore defeats the point.

Border Radius: Conclusions

While Border Radius is still not fully supported it can still be used in production provided you are careful and remember that Internet Explorer users aren’t going to be able to see your rounded corners. Not that it’s anything new that IE users are missing out on the new features.

Despite that if you are careful with your designs, by making sure they look presentable without the rounded corners, you can still use them effectively & allow those with up-to-date browsers see all the fancy rounded corners you’ve always wanted.

BorderBorder RadiusCSS