Коротко: border-radius — свойство CSS, которое скругляет углы блока. Значение — это радиус скругления: 8px, 50%, 1rem. Можно задать один радиус на все углы, разные для каждого угла или даже овальные скругления. Из него делают «пилюли», круги, аватары и мягкие карточки.
overflow: hidden не обрежется, а большие радиусы ломают тени.Основы: один угол или все
.card { border-radius: 8px; } /* все углы */
.box { border-radius: 16px 0; } /* по диагонали */
.box { border-radius: 8px 4px 12px 2px; } /* 4 угла по часовой */Порядок четырёх значений — по часовой стрелке: верх-лево, верх-право, низ-право, низ-лево.
Вкладки: типовые приёмы
.btn {
border-radius: 999px; /* «пилюля» */
padding: 12px 24px;
}Большое значение автоматически «зажимается» до половины высоты — получается кнопка с полукруглыми торцами.
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}50% делает круг из квадрата. Для аватаров добавьте object-fit: cover, иначе фото исказится.
.note {
border-radius: 0 12px 12px 0; /* скруглены правые углы */
}Приём для «закладок» и акцентных блоков у левого края. Также есть логические свойства border-start-start-radius для RTL-раскладок.
.thumb {
border-radius: 12px;
overflow: hidden; /* обязательно! */
}
.thumb img { display: block; width: 100%; }Если просто скруглить контейнер, картинка внутри останется прямоугольной. Обрезку даёт только overflow: hidden (или радиус прямо на элементе изображения).
внешний − padding. Так карточки выглядят аккуратно.Овальные углы и проценты
Радиус можно задавать парой «горизонталь / вертикаль» через слэш:
.leaf {
width: 120px; height: 80px;
border-radius: 60px / 40px; /* овальное скругление углов */
}В процентах: border-radius: 50% — круг или овал в зависимости от пропорций; вертикаль считается от высоты, горизонталь — от ширины.
Радиус и тень: как не «поплыть»
Тень (box-shadow) повторяет форму блока, включая скругления. Если радиус большой, а тень резкая, угол смотрится «грязно». Решение — мягкая тень с размытием:
.card {
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Картинка не обрезалась | нет overflow: hidden |
добавить обрезку |
| Круг овальный | ширина ≠ высоте | задать равные размеры |
| Тень «резаная» | резкая тень при большом радиусе | увеличить blur |
| Вложенный блок торчит | внутренний радиус больше нужного | внутренний = внешний − padding |
Проверьте себя
Вопросы и ответы
По часовой стрелке: верх-лево, верх-право, низ-право, низ-лево. Если значений меньше, браузер зеркалит их по диагонали.
Полностью скругляет торцы кнопки до полукругов — эффект «пилюли». Удобно, потому что не нужно знать точную высоту.
Да, задайте радиус конкретному углу: border-top-left-radius: 16px; — или укажите значения для четырёх углов.
Через слэш: border-radius: 60px / 40px; — горизонтальный и вертикальный радиусы отличаются, углы становятся овальными.
Итоги
border-radiusскругляет углы; порядок значений — по часовой стрелке.50%— круг,999px— «пилюля».- Для обрезки картинок внутри нужен
overflow: hidden. - Согласуйте радиусы с дизайн-системой и тенью.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.