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:
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.
The Result
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.
