How to Add Rounded Corners to Table Cells Using CSS?

Applying Border Radius to Table Cells

To add rounded corners to table rows (tr), consider the following approach:

• CSS limitations: Note that you cannot directly apply border-radius to tr or table elements. Instead, you must apply it to individual table cells (td).
• Separate Border and Padding for Cells:

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

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

• Corner Styles:

<code class="css">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; }</code>

• Border Styles for Top and Left Cells:

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

This technique allows for the creation of rounded corners on the table while maintaining the desired border and spacing.

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