How to Create Rounded Table Corners Using Only CSS?

CSS Only Rounded Table Corners

Creating tables with rounded corners using only CSS proves to be a common challenge. This article tackles this issue, presenting a solution that avoids the use of images or JavaScript.

To achieve rounded corners, the table's border-radius property is employed. Additionally, separate borders are added to each cell to preserve the rounded appearance. The following CSS snippet demonstrates this approach:

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

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

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

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

In this example, the table has a blue background for the headers and a solid black border around the entire table and each cell. The border-radius property sets the radius of the corners for the table. To prevent the borders from interrupting the rounded appearance, they are added as separate borders for each cell and header. This ensures that the rounded corners remain intact even when borders are present.

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