Rounded table corners CSS only

Question

I have searched and searched, but haven't been able to find a solution for my requirement.

I have a plain ol' HTML table. I want round corners for it, without using images or JS, i.e. pure CSS only. Like this:

Rounded corners for corner cells, and 1px thick border for the cells.

So far I have this:

table {   -moz-border-radius: 5px !important;   border-collapse: collapse !important;   border: none !important; } table th, table td {   border: none !important } table th:first-child {   -moz-border-radius: 5px 0 0 0 !important; } table th:last-child {   -moz-border-radius: 0 5px 0 0 !important; } table tr:last-child td:first-child {   -moz-border-radius: 0 0 0 5px !important; } table tr:last-child td:last-child {   -moz-border-radius: 0 0 5px 0 !important; } table tr:hover td {   background-color: #ddd !important } 

But that leaves me without any borders for the cells. If I add borders, they aren't rounded!

Any solutions?

Answer 1

Seems to work fine in FF and Chrome (haven't tested any others) with separate borders: http://jsfiddle.net/7veZQ/3/

Edit: Here's a relatively clean implementation of your sketch:

table {     border-collapse:separate;     border:solid black 1px;     border-radius:6px; }  td, th {     border-left:solid black 1px;     border-top:solid black 1px; }  th {     background-color: blue;     border-top: none; }  td:first-child, th:first-child {      border-left: none; }

<table>     <thead>     <tr>         <th>blah</th>         <th>fwee</th>         <th>spoon</th>     </tr>     </thead>     <tr>         <td>blah</td>         <td>fwee</td>         <td>spoon</td>     </tr>     <tr>         <td>blah</td>         <td>fwee</td>         <td>spoon</td>     </tr> </table>

http://jsfiddle.net/MuZzz/3577/