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

Question

I want to add a style border-radiusto an element <tbody>.

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

border correctly displays, unfortunately, without rounding.

Answer 1

You can try to use box-shadowwith 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>

Run code

Answer 2

tbody{
    display:table;
    border: 1px solid red;
    border-radius: 12px;
    }

<table>
  <thead> 
      <th>head...</th>
  </thead>
  <tbody >
    <tr>
      <td>test...</td>
    </tr>
  </tbody>
</table>

Run code

Answer 3

border-collapse: collapse;

tbody

display:block

.

CSS?

Answer 4

, , < > , .

<table id="myTable">
  <thead>header</thead>
  <tbody >
    <tr>
      <td>td content</td>
    </tr>
  </tbody>
</table>

<style>
    #myTable{
        border: 1px solid black;
        border-radius: 12px;
    }
</style>