Monday, March 23, 2009

CSS3: border-radius property

Since announced in 2005 the CSS3 border-radius property has come a long way to be supported in many browsers. It's what every web developer and designer have dreamed of - no more using images or multiple div tags to create rounded corners!

This is probably one of the most-used CSS3 properties and it's so easy to implement. Learning  the border-radius property is a breeze. Let's get started with some example code.

Simple Rounded Corners

The code:

.box {
background: #f9f9e0;
padding: 10px;
border: 1px solid #cfcf99;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

The -moz- prefix is for Firefox. The -webkit- prefix is for Safari and Chrome.

The outcome:

This box should have rounded corners for Firefox.

How The border-radius Property Works

First, let's go over the syntax. I used the shorthand property so all corners have the same value. The original properties are:


The border-radius properties can each accept either one or two values, expressed as a length (px) or a percentage (%) - percentages refer to the corresponding dimensions of the border box.

The border-radius Syntax:

border-radius: [ px | % ] [ px | % ]

The code:

.box {
-moz-border-radius: 10% 10px 10% 10px;
-webkit-border-radius: 10% 10px 10% 10px;
border-radius: 10% 10px 10% 10px;

The outcome:

This box should have rounded corners for Firefox.

The Mozilla implementation also behaves slightly differently from the specification when percentages are supplied. You can read more on the Mozilla Developer Center.

If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.

For more information on the border-radius property visit W3C on CSS Backgrounds and Borders.