Свойство border-radius: скругление
Как скруглять карточки, делать капсулы и учитывать размеры элемента.
Как это работает
border-radius скругляет углы рамки и фона элемента. Значения в пикселях дают постоянный радиус, проценты зависят от размеров бокса. Для круга обычно нужен квадрат и радиус 50%; у прямоугольника получится овал.
Сокращённая запись позволяет управлять углами отдельно. Скругление само по себе не гарантирует обрезку всего дочернего содержимого: для выступающей картинки может потребоваться overflow: hidden. Применяйте это осторожно, чтобы не обрезать фокус и всплывающие элементы.
Пример в интерфейсе
.badge { display: inline-block; padding: 8px 18px; border-radius: 999px; background: #eaf4ee; color: #11694e; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| 12px | Одинаковое скругление углов. |
| 50% | Радиус относительно размеров бокса. |
| 999px | Практический приём для капсулы. |
| border-top-left-radius | Настройка отдельного угла. |
На что обратить внимание
Не используйте overflow: hidden автоматически для каждой скруглённой карточки. Выпадающее меню или тень потомка могут оказаться обрезанными.
Проверьте на практике
Измените высоту блока с radius: 50% и сравните круг с овалом. Затем попробуйте капсулу для короткой подписи.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.