CSS: Rounded corners using only CSS 2.1

Thoughts from the team
By    | February 18, 2008 | Tutorials

Ever wanted to be able to create boxes with rounded corners without using images or relying on CSS3? Well now you can with the xsnazzy method by Stu Nicholls.

The technique hinges on using 4 elements (in this case <b> tags), each slightly narrower than the previous, with appropriate borders and backgrounds applied to create the illusion of a curve. These 4 elements are then included in reverse order at the bottom of the box to create the opposite curves. We can see the arrangement of pixels created in this close up:

xsnazzy corner close-up

The CSS

.xtop,.xbottom { display:block; background:transparent; font-size:1px; }
.xbcontent { display:block; padding: 5px 10px;}
.xb1,.xb2,.xb3,.xb4 { display:block; overflow:hidden; }
.xb1,.xb2,.xb3 { height:1px; }
.xb2,.xb3,.xb4,.xbcontent { border:solid #000; border-width:0 1px; background: #fff;}
.xb1 { margin:0 5px; background:#000; }
.xb2 { margin:0 3px; border-width:0 2px; }
.xb3 { margin:0 2px; }
.xb4 { height:2px; margin:0 1px; }

The XHTML

We can then apply these styles to the following bare-bones XHTML to create our content boxes.

This is a very nice box with rounded corners using only valid CSS 2.1

The Result

xsnazzy box

This method is semantically incorrect as it contains a large number of superfluous <b> tags and is produces jagged edges which are far from pretty. However, if you need a quick and dirty method to get rounded corners on your boxes without relying on images, then it’s a pretty neat solution.

More like this