<label for="border-separate">Separate</label>
<input name="border-behavior" type="radio" id="border-separate" checked>

<label for="border-collapse">Collapse</label>
<input name="border-behavior" type="radio" id="border-collapse">

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

table {
  border-spacing: 1em;
  margin: 1rem auto;
}
td {
  padding: 1rem 1.2rem;
  border-radius: 6px;
  border: 1px solid red;
}

#border-separate:checked ~ table {
  border-collapse: separate;
}

#border-collapse:checked ~ table {
  border-collapse: collapse;
}





body {
  text-align: center;
}
input {
  margin-right: 20px;
}