How to create table with round corners?

If you would like help on creating table with round corners or if you have any recommendations send an email. You can vote for the round table corners page here Here is how previous visitors rated this page:

If you would like to add tables with round corners to your website this page might prove helpful. We will examine two ways for creating table with round corners. The first one will be based on HTML layers (div) and CSS. The second will use HTML tables (table) and CSS. It is up to you to decide which method works better for you.

Before we start our example here is a question for you: Is it possible to create round table corners without using any images?

... and the answer is yes or at least for Mozilla based browsers like Firefox. We can use Mozilla specific CSS to create table with round corners. Unfortunately this will not work for non Mozilla browsers including IE (Internet Explorer).

The "-moz-border-radius" style renders round box corners. You can specify different values for each corner like this: -moz-border-radius: 10px 20px 5px 0px;

Once again: Please note that the example will work for Mozilla based browsers like Firefox. Download Firefox

Here is the html code for our example:

<div style="width: 200px; height: 100px; background-color: #6598CC; -moz-border-radius: 20px"></div>

The html code above should produce the following round corners box in your Firefox browser:

1. Creating round corners using layers (div) and CSS. Let's start with creating the corner images. Use your favorite image software to create images like these:

The html for creating table with round corners is the following:

<div id="table-top"></div> <div id="table-content">some table content</div> <div id="table-bottom"></div>

As you may have guessed by the ids of the layers above the first and last layer will hold the two images you have created. The second layer will hold the table content.

Here are the styles (css) for each layer:

#table { width: 136px; background-color: #69c; } #table-top { width: 136px; height: 20px; background-image: url(img/table-top.png); } #table-bottom { width: 136px; height: 20px; background-image: url(img/table-bottom.png); }

The first image is set as background image of the first layer: background-image: url(img/table-top.png).

The second image is set as background image of the last layer: background-image: url(img/table-bottom.png).

The sizes of the first and last layer are set to match exactly the image sizes: width: 136px; height: 20px;

The div that holds the content is set to be 136px wide and to have the same blue color as the images(background-color: #69c;).

And here is the result:

You may have noticed that the second layer (the one that holds the content) does not have height set. If you add more content the layer will grow in height and you will still have good looking round corners table:

There is one disadvantage of the first approach. If you would like to change the width of the table you will have to create new background images for the first and last layer.

2.The second approach is based on HTML tables and lacks the disadvantage of the fist approach. We will need four images. One image for every corner. Here is the top-left image:

Once you create the first image you can just rotate it to create the rest of the images.

The table we need to create should have three rows and three columns. The images have to be placed in the table like this:

Here is the table:... and the CSS and HTML code:

#round_corners_table { border: 0px; border-collapse: collapse; background-color: #69c; } #top-row {height: 20px; } #bottom-row {height: 20px; } #tl { width: 18px; background-image: url(img/corner_tl.png); } #tr { width: 18px; background-image: url(img/corner_tr.png); } #bl { background-image: url(img/corner_bl.png); } #br { background-image: url(img/corner_br.png); }

<table id="round_corners_table"> <tr id="top-row"><td id="tl"></td><td></td><td id="tr"></td></tr> <tr><td></td><td>table content</td><td></td></tr> <tr id="bottom-row"><td id="bl"></td><td></td><td id="br"></td></tr> </table>

It is up to you to use and combine some of the techniques of the first and second approach to create the table with round corners that best fits your needs.