Rounded edges on table rows

To add border radius to a table row tr, you have to specifically target the first table data td on the row and the last.

tr{
  border-radius: 10px
}

This wont work..

Instead do this:

// Set border-radius on the top-left and bottom-left of the first table data on the table row
td:first-child,
th:first-child {
  border-radius: 10px 0 0 10px;
}

// Set border-radius on the top-right and bottom-right of the last table data on the table row
td:last-child,
th:last-child {
  border-radius: 0 10px 10px 0;
}

Checkout the codepen below

Comments

[Michal Janek]

If you open this on Firefox you may notice a small border created right before the end of first cell and beginning of last.

Basically Safari adds a thin border even if you dont specify it if you apply rounded corners.
Any solutions to this ?

[Gary Calle]

Muchas Gracias, me sirvio!