How-to: Rounded Table Borders using CSS

Today’s how-to is about web design. One of the important design tricks in a web designers toolkit is making rounded tables that look “web 2.0 ish” unless of course your going for that blocky circa 1996 look for your web site.

The first step is to design a simple page with a table. Call this file table.html. In the file put the following code:

This will make a page that looks pretty boring.

Now lets add some flavor to this boring old table. To do this we need to create a css file to attach to the html document. so create a file called table.css and in it put this code:

padding:10px;
width:100%;
border:2px solid;
border-color: #000;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.CSSTable td {
border-color:inherit;
border: 2px solid;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

Next attach the css to your html file and add the class .CSSTable to your table.

Edit your table.html file and add the following to the head section.

Now add the class to your table line in the html file like so:

Save all your files and preview your page in a browser. You will now get a rounded css table that looks a little better.

You can keep modifying to your hearts content. Play with all the css options. You can really take your tables anywhere.