DEV Community

loading...
Cover image for Rounded edges on table rows

Rounded edges on table rows

Temitope Ayodele
Frontend and Web Accessibility Engineer passionate about optimizing for web performance, user experience and accessibility.
・1 min read

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
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Checkout the codepen below

Discussion (2)

Collapse
garyskt profile image
Gary Calle

Muchas Gracias, me sirvio!