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
Top comments (2)
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 ?
Muchas Gracias, me sirvio!