How to use border radius to create a collapsed table with rounded corners with CSS?

Sometimes, we want to use border radius to create a collapsed table with rounded corners with CSS.

In this article, we’ll look at how to use border radius to create a collapsed table with rounded corners with CSS.

How to use border radius to create a collapsed table with rounded corners with CSS?

To use border radius to create a collapsed table with rounded corners with CSS, we select the first and last cells on the bottom row and make their corners rounded.

For instance, we add a table with

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Then we write

table tr:last-child td:first-child {
  border: 2px solid orange;
  border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
  border: 2px solid green;
  border-bottom-right-radius: 10px;
}

to seleect the last row’s first and last cells with table tr:last-child td:first-child and the last row with table tr:last-child td:last-child.

And then we set the left and right border radius to the value we want respectively.

Conclusion

To use border radius to create a collapsed table with rounded corners with CSS, we select the first and last cells on the bottom row and make their corners rounded.