Blog

CSS3 Border Radius - A Love Hate Relationship

We’ve recently been doing some major updates to our site, and one of them is replacing button images with css for the same effect. Rounded buttons and boxes have had a love hate relationship with web designers for years, we love them because they make elements look better, but hate them because they’ve been a pain to create in the past. In the past you’ve had to create a rounded box or button as an image, and then apply it to your site as the elements background or by using tons of css to implement it correctly. There have been many hacks, jquery plugins, and even full websites dedicated to rounded corners.

So why is it getting way better and easier to make this effect?

CSS3 and the border-radius property is the answer, and with this property supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera most of your audience will be able to view it. The border-radius property allows you to add rounded borders to elements, eliminating the need for images. So what about older browsers? This is mostly a concern with IE which until version 9 did not support border radius and will default to regular squared corners. But don’t fret, with most people upgrading IE and the fact that most browsers have pushed updates (and most browsers besides IE have supported this feature throughout their last few versions), your rounded boxes and buttons will be seen more readily than before. If you are worried about support there are many jquery plugins available that will let you create rounded corners for older versions of IE, but if you want to implement even more CSS3 features than just border-radius in older versions of IE, check out css3pie which makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Let us know in the comments if you have implemented border-radius on your site, and how you did it!

‹ Back To Posts