Round corners with css3

One of the planned new features for CSS is a property called border-radius. As the suggests this allows any element with a border to display rounded corners. This tutorial is a guide to this property and what effects can be made with it.

The basics

Currently only a selection of browsers support this property, namely Firefox, Safari and Google's Chrome. Whilst this may prevent some users from seeing the effects it won't stop anyone from using your website - they'll simply see a boring square box.

As CSS3 is not yet official the implementations of this property varies from browser to browser and so we have to add a number of CSS lines to do the same thing. First step is add a border as normal:

div.example {
        border:1px solid #333333;   /* default border */
}

This div has a border of 1 pixel, colour #333333

This is what any browser which doesn't currently support the border-radius property will display.

To add the radius we add two extra lines, one for mozilla browsers (Firefox) and one for Webkit based browsers (Safari, Chrome):

div.example {
        border:1px solid #333333;   /* default border */
	-moz-border-radius:10px;    /* radius for firefox */
	-webkit-border-radius:10px; /* radius for safari, chrome, etc */
}

This div has a border of 1 pixel, colour #333333 and a radius of 10px at each corner

Et voila! Your first rounded border element!

Separate corners

The border-radius property applies the effects to each 4 corners of the element. Much like the border property you can also apply border-radius to certain sides, or in the case of border-radius, corners.

Top left

div.example {
        border:1px solid #333333;   /* default border */
	-moz-border-radius-topleft:10px;    /* radius for firefox */
	-webkit-border-top-left-radius:10px; /* radius for safari, chrome, etc */
}

This div has a border of 1 pixel, colour #333333 and a radius of 10px at the top left corner

Bottom right

div.example {
        border:1px solid #333333;   /* default border */
	-moz-border-radius-bottomright:10px;    /* radius for firefox */
	-webkit-border-bottom-right-radius:10px; /* radius for safari, chrome, etc */
}

This div has a border of 1 pixel, colour #333333 and a radius of 10px at the bottom right corner

Top left and bottom right

div.example {
        border:1px solid #333333;   /* default border */
	-moz-border-radius-bottomright:10px;    /* radius for firefox */
	-moz-border-radius-topleft:10px;    /* radius for firefox */
	-webkit-border-top-left-radius:10px; /* radius for safari, chrome, etc */
	-webkit-border-bottom-right-radius:10px; /* radius for safari, chrome, etc */

}

This div has a border of 1 pixel, colour #333333 and a radius of 10px at the bottom right amd top left corners

And so on...Note that the CSS for webkit browsers is slightly different to that of the CSS for Mozilla.

Some further examples

Below are a few simple examples of the border-radius property, view source to see the CSS code of each one

Curved button Curved button Tabs Gradient

Free web tools