Return to Answer

The following method works (tested in Chrome) by using a box-shadow with a spread of 1px instead of a "real" border.

table { border-collapse: collapse; border-radius: 30px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 1px #666; /* this draws the table border */ } td { border: 1px solid #ccc; } 

The following method works (tested in Chrome) by using a box-shadow with a spread of 1px instead of a "real" border.

 table { border-collapse: collapse; border-radius: 30px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 1px #666; /* this draws the table border */ } td { border: 1px solid #ccc; }

<table> <thead> <tr> <th>Foo</th> <th>Bar</th> </tr> </thead> <tbody> <tr> <td>Baz</td> <td>Qux</td> </tr> <tr> <td>Life is short</td> <td rowspan="3">and</td> </tr> <tr> <td>Love</td> </tr> <tr> <td>is always over</td> </tr> <tr> <td>In the</td> <td>Morning</td> </tr> </tbody> </table>

for chrome following method works:

 table{ border-collapse: collapse; -webkit-box-shadow:0 0 1px #666; /* this item draw table border */ -webkit-border-radius:30px; border-style: hidden; /* hide standart table (collapsed) border */ } td { border:1px solid #ccc; } 

The following method works (tested in Chrome) by using a box-shadow with a spread of 1px instead of a "real" border.

table { border-collapse: collapse; border-radius: 30px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 1px #666; /* this draws the table border */ } td { border: 1px solid #ccc; } 

for chrome following method works:

table{ border-collapse: collapse; -webkit-border-radius:30px; border-style: hidden; }

td { border:1px solid #ccc; }

for chrome following method works:

 table{ border-collapse: collapse; -webkit-box-shadow:0 0 1px #666; /* this item draw table border */ -webkit-border-radius:30px; border-style: hidden; /* hide standart table (collapsed) border */ } td { border:1px solid #ccc; }