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.