Скругление углов

До появления свойства скруглённые кнопки и плашки рисовали картинками-уголками и вкладывали в таблицы. Сейчас это одна строка CSS, которая работает во всех браузерах. Скругление обрезает фон, рамку и тень элемента по заданной кривой, а с overflow: hidden — ещё и всё содержимое, например фотографию внутри карточки.

Как записываются значения

Порядок углов в сокращённой записи — по часовой стрелке от левого верхнего: левый верхний, правый верхний, правый нижний, левый нижний. Если значений меньше четырёх, недостающие берутся с противоположного угла, как у отступов.

.card   { border-radius: 12px; }            /* все углы */
.tab    { border-radius: 8px 8px 0 0; }     /* только верх */
.avatar { border-radius: 50%; }             /* квадрат → круг */
.pill   { border-radius: 999px; }           /* кнопка-«таблетка» */
.blob   { border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; }

.card img { display: block; }
.card     { overflow: hidden; }            /* фото не вылезет за углы */

Значение через косую черту задаёт отдельно горизонтальные и вертикальные радиусы — получаются эллиптические углы. Есть и полные свойства для отдельных углов, например border-top-left-radius, а для вёрстки с письмом справа налево — логические border-start-start-radius и подобные.

Неочевидные моменты

• Проценты считаются от сторон. Горизонтальный радиус — от ширины, вертикальный — от высоты. Поэтому 50% у прямоугольника даёт овал, а не кнопку с полукруглыми краями. Для «таблетки» используют большое значение в пикселях.
• Слишком большие радиусы уменьшаются. Если сумма радиусов соседних углов больше стороны, браузер пропорционально уменьшит все радиусы.
• Тень и обводка повторяют форму. Тень блока скругляется вместе с элементом. Контур фокуса в современных браузерах тоже следует скруглению, в старых он оставался прямоугольным.

Где уместно

Радиусы лучше задавать системой: два-три значения в переменных для мелких элементов, карточек и модальных окон. Когда у каждой кнопки своё скругление, интерфейс выглядит собранным из разных наборов. Рамку, к которой применяется скругление, описывает статья про границу элемента.