When we talk about table-less HTML/xHTML coding, the first thing that comes to your mind is DIV.  To create rounded corners, coders have  been depending on DIVs all the time. Yes of course, it’s been the best in the de facto standard in html coding business.

However I’d like to give you an idea about another way of building a rounded corner box without using DIVs.

Assume that you’ve been asked to slice the following box and code it with HTML.

You’d start slicing the box according to the way below. It contains three parts. The top, middle and the bottom slices. It is really important to optimize all these slices to get the best performance on the web. For this reason, the above mentioned slices should be cut off to their smallest outward appearance without losing the quality of the image.

Now Let’s see how to code this box using the unordered list (<ul>) tag.
<ul>

<li></li>

<li></li>

<li></li>

</ul>

Here I’ve used three list items for the top, middle and the bottom slices. Now have a  look at the way to apply CSS styles to make the rounded box.

ul.box{list-style-type:none;padding:0;margin:0;width:200px;}

The above style class will remove the list item, bullets and the default padding and margins.

ul.box li{float:left;width:200px;}

We can group the common styles for the list items(<li>) as above.

ul.box li.top{height:5px;background-image:url(images/top.jpg);overflow:hidden;}

Now we’ve just applied the box top graphics using CSS.

ul.box li.mid{height:140px;background-image:url(images/mid.jpg);background-repeat:repeat-y;}

Above I’ve shown how to code the middle part of the box using CSS.

ul.box li.bot{height:5px;background-image:url(images/bot.jpg);overflow:hidden;}

Finally, the box bottom has been completed. Your rounded corner box with HTML is now ready.