Question

What is the best way to create a curved border around the table?

Using border-radius property simply puts a curved border around the outer part of the table. However, the individual cells generate a dual border.

<table class="round" with="100%" height="200">
 <tr>
   <td>Text</td>
 </tr> 
</table>

Its css is defined as

.round{
     border: 1px solid black;
     border-radius: 20px; 
 }

This will just generate a rounded table with no border around the cells. If we try to generate a border around the cells by putting

.round td{
   border: 1px solid black;
}

We then get a dual border.

Is there a workaround?

Answer 1

Put a border-radius on the corner cells instead.

.tr:first-child .td:first-child{
  border-top-left-radius: 20px;
}
.tr:first-child .td:first-child{
  border-top-right-radius: 20px;
}

.tr:last-child .td:first-child{
  border-bottom-left-radius: 20px;
}
.tr:last-child .td:first-child{
  border-bottom-right-radius: 20px;
}

You might want to pad these cells a bit, depending on the content.
Also you will need vendor prefixes and maybe to apply a style with javascript for IE. Or use Pie.