How to Apply Border Radius to Table Rows in HTML?

How to Apply Border Radius on Table Rows

When styling HTML tables, developers often encounter limitations when attempting to apply styles to table rows (

). While setting up border styles with border-collapse allows for borders around elements within the table, it doesn't extend to the elements themselves.

A common issue arises when trying to apply border radius (-moz-border-radius or modern border-radius) to table rows. Unfortunately, this property cannot be applied directly to

elements.

Solution:

Given this limitation, a workaround is necessary to achieve rounded corners on table rows. The solution involves applying a border styling strategy to the individual

elements:

<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>

This method creates the illusion of rounded corners on table rows by setting specific border styles and radii on the

elements at the beginning and end of each row. The border-collapse: separate property is crucial, as it allows borders to be applied to each cell individually, enabling the desired styling effect.

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