To use border radius I have a border radius of 20px in the table, and then put the border radius on the first child of the table header (th) and the last child of the table header.
table {
border-collapse: collapse;
border-radius:20px;
padding: 10px;
}
table th:first-child {
/* border-radius = top left, top right, bottom right, bottom left */
border-radius: 20px 0 0 0; /* curves the top left */
padding-left: 15px;
}
table th:last-child {
border-radius: 0 20px 0 0; /* curves the top right */
}
This however will not work if this is done with table data (td) because it will add a curve onto each table row. This is not a problem if you only have 2 rows in your table but any additional ones will add curves onto the inner rows too. You only want these curves on the outside of the table. So for this, add an id to your last row. Then you can apply the curves to them.
/* curves the first tableData in the last row */
#lastRow td:first-child {
border-radius: 0 0 0 20px; /* bottom left curve */
}
/* curves the last tableData in the last row */
#lastRow td:last-child {
border-radius: 0 0 20px 0; /* bottom right curve */
}