способ создать изогнутую границу вокруг стола?

Question

Как лучше всего создать изогнутую рамку вокруг стола?

Использование свойства border-radius просто помещает изогнутую границу вокруг внешней части таблицы. Однако отдельные ячейки создают двойную границу.

<table class="round" with="100%" height="200">
 <tr>
   <td>Text</td>
 </tr> 
</table>

Его CSS определяется как

.round{
     border: 1px solid black;
     border-radius: 20px; 
 }

Это просто создаст закругленную таблицу без рамки вокруг ячеек. Если мы попытаемся создать границу вокруг ячеек, поставив

.round td{
   border: 1px solid black;
}

Затем мы получаем двойную границу.

Есть ли обходной путь?

Answer 1

Вместо этого поместите радиус границы в угловые ячейки.

.tr:first-child .td:first-child{
  border-top-left-radius: 20px;
}
.tr:first-child .td:first-child{
  border-top-right-radius: 20px;
}

.tr:last-child .td:first-child{
  border-bottom-left-radius: 20px;
}
.tr:last-child .td:first-child{
  border-bottom-right-radius: 20px;
}

Возможно, вы захотите немного дополнить эти ячейки, в зависимости от содержимого.Также вам понадобятся префиксы вендоров и, возможно, для применения стиля с JavaScript для IE.Или используйте пирог.