How to add border-radius on <tbody> element?

Question

I want to add the border-radius style on the <tbody> element.

<table>
  <thead>...</thead>
  <tbody style="border: 1px solid red; border-radius: 12px;">
    <tr>
      <td>...</td>
    </tr>
  </tbody>
</table>

The border renders correctly, unfortunately without rounding.

Answer 1

You can try using box-shadow along with border-radius.

tbody {
  box-shadow: 0 0 0 1px red;
  border-radius: 10px;
}

<table>
  <thead>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Answer 2

Here is a solution that works for me :

body {
  background-color: #2b7b2b;
}

table tbody {
  background-color: white;
}

table tbody td {
  display: table-cell
}

table tbody tr:first-child td:first-child {
  border-top-left-radius: 5px;
}

table tbody tr:first-child td:last-child {
  border-top-right-radius: 5px;
}

table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}

table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

<div class="body">
  <table>
    <thead>
      <tr>
        <td>column 1</td>
        <td>column 2</td>
        <td>column 2</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>