How to Add Rounded Corners to Table Rows in HTML?

Styling Table Rows with Border Radius

In HTML tables, the element represents a table row. While it's possible to add a solid border to table rows using border-collapse, adding rounded corners to rows presents a challenge.

To overcome this limitation, you can use the following CSS styles:

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }</code>

These styles accomplish the following:

• Set the border-collapse property to separate to keep borders inside table cells.
• Apply a solid border to elements.
• Suppress the top and left borders for most elements.
• Apply rounded corners to the top-left and top-right corners of the first row.
• Apply rounded corners to the bottom-left and bottom-right corners of the last row.
• Restore the top border for elements in the first row and the left border for elements in the first column.

The above is the detailed content of How to Add Rounded Corners to Table Rows in HTML?. For more information, please follow other related articles on the PHP Chinese website!