Ячейка с закругленными краями выглядит эффектно и часто сильно добавляет карме к интерфейсу сайта. Закругления добавляют элементу мягкости, создают ощущение гармонии. В современных дизайнах закругленные углы часто используются, чтобы придать интерфейсам и объектам более современный и стильный вид.

В html для закругления я обычно добавляю в стили border-radius и добиваюсь нужного эффекта, например так:

.inputBox {
  width: 250px;
  padding: 10px;
  border: #000 1px solid;
  background: #EEE;
  border-radius: 5px;
  outline: none;
  color: #000;
  font-size: 1em;
}

Недавно я хотел сделать html-таблицу, строки которой были бы с закругленным фоном. По наитию хотел добавить в стили свойство border-radius для тэга <tr>, но оказалось, что для тэга <tr> свойство border-radius не работает.

Выход оказался чуть сложней, но не скажу, что сильно усложнил решение.

Вариант 1. Использование псевдо-элементов в CSS

tr.round {
    background-color: cadetblue;
}
tr.round td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
 }
tr.round td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

Другой способ стал для меня открытием - через свойство clip-path

.cliprow {
    background-color: brown;
    clip-path: xywh(0 0 100% 100% round 10px);
    border-radius: 10px,
}

Выглядит вот так:

#	Name	Score
1	User 1	3
2	User 2	4
3	User 3	38