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. }