How to Create Rounded Table Corners with CSS Only?

Rounded Table Corners with CSS Only

Creating rounded table corners is a common design requirement. Here's how to achieve this effect using pure CSS:

table {
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 6px;
}

td, th {
  border-left: 1px solid black;
  border-top: 1px solid black;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

This approach uses separate borders for the table and cells. By setting the border-radius on the table, the corners are rounded. The separate borders ensure that the cells still have straight edges. The border-top property is removed from the table headers (th) to align them with the borders of the table data (td). Finally, the first cells in each row have their left border removed to complete the rounded corner effect.

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