Как скруглить углы

Короткий ответ

Радиус скругления задаёт border-radius:

<div style="padding: 16px; background: lavender; border-radius: 12px;">Rounded card</div>

Отдельные углы

Четыре значения идут по часовой стрелке от левого верхнего угла. Скругляем только верх:

<div style="padding: 16px; background: honeydew; border-radius: 16px 16px 0 0;">Rounded top</div>

Пилюля

Очень большой радиус превращает прямоугольник в «пилюлю» — удобно для кнопок и меток. В отличие от процентов, он не превратит широкий элемент в овал:

<button style="padding: 8px 20px; border: none; border-radius: 999px; background: royalblue; color: white;">Subscribe</button>
<button style="padding: 8px 20px; border: none; border-radius: 50%; background: tomato; color: white;">50% makes an oval</button>

Картинка в скруглённой карточке

Картинка внутри не знает о скруглении родителя и торчит углами. overflow: hidden у карточки обрезает её:

<div style="width: 200px; border-radius: 16px; overflow: hidden; background: whitesmoke;">
  <img src="/media/photo-400x250.jpg" alt="" style="width: 100%; display: block;">
  <p style="margin: 8px;">Lake view</p>
</div>

Частая ошибка

Скруглить элемент без фона и рамки: радиус есть, но его не видно — скругляется невидимая граница. Сначала дайте элементу фон, рамку или тень, тогда углы станут заметны.

Спасибо, что читаете!