htmlcsshtml-tablerounded-corners

Rounded table corners CSS only


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:

Table layout sketch

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?


Solution

  • 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/