Rounded Corner Boxes the CSS3 Way

To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.

1. .box {
2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
3. }

We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat.

1. .box {
2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
4. }

Lastly, we need to define the positioning of each corner image.

1. .box {
2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
4. background-position: top left, top right, bottom left, bottom right;
5. }

And there we have it, a simple rounded corner box with no additional mark-up.

As well as using multiple background images, CSS3 also has the ability to create rounded corners without the need of any images at all. You can do this by setting the border-radius property to your desired value as seen in the next example.

1. .box {
2. border-radius: 1.6em;
3. }

This technique currently works in Firefox/Camino and creates a nice, if somewhat jagged rounded corner. If you want to create a box that works in both Mozilla and WebKit based browsers, why not combine both techniques and see what happens.