Rounded Corners Using CSS3

Rounded corners are quite common these days across lots of websites. They are definitely appealing and help change it up from the normal square boxes a browser renders by default.

There are several techniques to create rounded corners (i.e. nest 4 divs and have a corner image aligned in each one), but my favorite by far is using the new CSS3 border radius property. Essentially, you can just use a few lines of CSS and create awesome looking rounded corners for an element on your webpage.

First, add a normal div to your page:

<div id="box">
    this is some text
</box>

And lets add some basic CSS to make it stand out a bit more

#box {
    background-color: #487690;
    color: #fff;
    padding: 20px;
    font-size: 16px;
}

So far, the div will render like this:

Now, lets add 3 lines of code. One is the official border-radius CSS3 property, and the other 2 lines are for Mozilla (Firefox and Camino use the -moz prefix) and WebKit (Chrome and Safari use the -webkit prefix). Since the border-radius is not fully supported in all browser, adding these browser specific properties ensures the corners will look rounded. Here is what the full CSS will look like for the box.

#box {
    background-color: #487690;
    color: #fff;
    padding: 20px;
    font-size: 16px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Assuming you are using a modern browser like Firefox, Chrome, or Safari, you should see the box with rounded corners.

The border-radius property allows you to set each corner as the same size or you can also specify each corner individually. In our example, 10px is applied to all corners. You can specify 4 values (similar to the shorthand for margin or padding for instance) if you want to have differnt values for each corner. If we used 10px 15px 20px 25px, that would affect the radius for the top left, top right, bottom right, and bottom left. You can even apply borders to your div and the border radius will round those as well.

To see the border radius in a real world example, check out the PowerGallery demo. The install wizard and admin both use this technique to round the corners of several elements including buttons and text fields.

Note: Internet Explorer does not support the border-radius property and does not have its own browser specific tag either. Check out this site for a list of techniques to round corners specifically for IE: http://www.smileycat.com/miaow/archives/000044.php#nojavascript