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

Blog

Rounded edges on table rows

Temitope Ayodele

Join Our Newsletter. No Spam, Only the good stuff.

Related