Как добавить дополнительное пространство по краям скругленной границы HTML таблицы с CSS

Question

Я пытаюсь добавить немного места по краям закругленной HTML таблицы. Вот изображение того, чего я хочу достичь (обратите внимание на дополнительное пространство по краям таблицы):
https://i.stack.imgur.com/JAm64.jpg
Для дополнительного пространства по краям я попытался добавить бордюр того же цвета, что и внутри, но скругленные углы почему-то не вышли.

Вот мой код:

table{
  background-color: #FBF85D;
  border: 25px solid #FBF85D;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<table class="board" cellpadding="15px">
  <tr>
      <!-- I am using Bootstrap buttons -->
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
  </tr>
  <tr>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
  </tr>
</table>

Answer 1

Вы можете использовать Заполнение

Попробуйте это

 
table{
  background-color: #FBF85D;
  border: 25px solid #FBF85D;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.btn-circle{
 padding:20px;
 outline:none;
 border:0;
 border-radius:60px;
}
  

<table class="board" cellpadding="15px">
  <tr>
      <!-- I am using Bootstrap buttons -->
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
  </tr>
  <tr>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
      <td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
  </tr>
</table>