Смещение закругленного контура в таблице html

Question

Когда я пытаюсь округлить каждое число в таблицах html, я применяю outline-offset.

Кажется, что форма не округлена.

Есть ли какой-нибудь метод для округлой формы и округленный до aqua?

Спасибо

.color {
    background-color: rgb(0,255,0);
    border-radius: 10px;
    outline: 3px solid aqua;
    outline-offset: -3px;
}

<table>
<tr>
<td class=color>1</td>
<td class=color>2</td>
<td class=color>3</td>

</tr>
</table>

Answer 1

Вы не можете округлить outline, но вы можете скруглить углы границы внутри.

Стиль table-cell не позволяет использовать все стили, типичные для тега div или span может иметь. Вложите данные своей ячейки в другой элемент и установите для него стиль.

table {
  border: 3px solid orange;
}

td {
  padding: 0.25em;
}

.color {
  background-color: rgb(0, 255, 0);
  border-radius: 10px; /* around the border */
  border: 3px solid red; /* inside the outline, outside the padding */
  outline: 3px solid aqua; /* inside the cell, outside the offset/border */
  outline-offset: 3px; /* inside the outline, outside the border */
  padding: 0.25em; /* inside the border */
  margin: 3px; /* inside the cell, outside the outline */
}

<table>
  <tr>
    <td><div class="color">1</div></td>
    <td><div class="color">2</div></td>
    <td><div class="color">3</div></td>
  </tr>
</table>

Answer 2

Для округления каждого числа используйте приведенный ниже фрагмент кода.

#rcorners1 {
  border-radius:85px;
  padding: 10px; 
  width: 20px;
  height: 15px;  
   background-color: rgb(0,255,0);
  

<table>
<tr>
<td class=rcorners1 id=rcorners1>1</td>
<td class=rcorners1 id=rcorners1>2</td>
<td class=rcorners1 id=rcorners1>3</td>

</tr>
</table>