Rounded Corners in Web Pages

Occasionally somebody asks me if there is an easy way to make the rounded corners you see around page elements in a lot of web pages.

Here’s the short answer: no. There isn’t anything in HTML or CSS that lets you display rounded corners for tables, div tags, or the like. Zippo. The rounded corners you see in one of my sites here is all images, and images are the only real way to pull it off.

The way I did it is technically considered ugly. Modern web designers shun using HTML tables for layout, preferring to use noting but CSS (suggesting using a table to make rounded corners around page elements would probably elicit a neandertal reference).

Going entirely CSS for complex page layouts can be painful, but in this case the CSS people have a point. I grabbed some code and images from http://www.schillmania.com/, and I have to admit it makes for a much easier implementation of rounded corners.

To save their bandwidth, I’ve made a link to their example here. You’ll probably want to work with the images to make them the color you’re going for, but the actual implementation is fairly easy:

<div class=”dialog”>

<div class=”hd”>
<div class=”c”></div>
</div>

<div class=”bd”>
<div class=”c”>
<– main content goes here –>
</div>
</div>

<div class=”ft”>
<div class=”c”></div>
</div>

</div>

Whatever you want in the main content area goes in the “c” div. The rounded corners are handled for you.