How to round table corners CSS only?

Sometimes, we want to round table corners CSS only.

In this article, we’ll look at how to round table corners CSS only.

How to round table corners CSS only?

To round table corners CSS only, we set the border-radius property on the table.

For instance, we write

<table>
  <thead>
    <tr>
      <th>foo</th>
      <th>bar</th>
      <th>baz</th>
    </tr>
  </thead>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>baz</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>baz</td>
  </tr>
</table>

to add a table.

then we write

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

to add border-radius: 6px; to make the table corners rounded.

We add border styles to show the rounded corners.

Conclusion

To round table corners CSS only, we set the border-radius property on the table.