Коротко: скруглённые углы делают свойством border-radius. Можно задать один радиус на все углы, разные радиусы для каждого, круг (50%), «пилюлю» (999px) и овальные углы через слэш. Чтобы скруглить картинку внутри блока — нужен overflow: hidden.
Базовые варианты
| Код | Результат |
|---|---|
border-radius: 8px; |
все углы |
border-radius: 16px 0; |
по диагонали |
border-radius: 8px 4px 12px 2px; |
4 разных угла |
border-radius: 50%; |
круг из квадрата |
border-radius: 999px; |
«пилюля» |
Вкладки: примеры
.card {
border-radius: 12px;
overflow: hidden; /* чтобы содержимое не выходило за углы */
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}Для карточки с картинкой сверху обязательно overflow: hidden — иначе изображение останется с прямыми углами.
.btn-round {
border-radius: 999px;
padding: 12px 24px;
}Большое значение «зажимается» до половины высоты — торцы становятся полукруглыми. Удобно: не нужно знать точную высоту.
.avatar {
width: 56px; height: 56px;
border-radius: 50%;
object-fit: cover; /* фото не искажается */
}Круглый аватар: равные ширина и высота плюс object-fit: cover. Без него фото сожмётся или растянется.
:root {
--radius-1: 4px;
--radius-2: 8px;
--radius-3: 16px;
}
.card { border-radius: var(--radius-3); }
.btn { border-radius: var(--radius-2); }Радиусы из переменных — как в дизайн-системе. Меняете набор — меняется весь сайт согласованно.
Практика: сделать сайт «мягким»
- Определите шкалу радиусов: 4, 8, 16px.
- Вынесите её в CSS-переменные.
- Примените к карточкам, кнопкам, полям ввода.
- Большие радиусы не делайте у мелких элементов.
- Проверьте тени: они должны повторять скругление.
- Проверьте картинки внутри — нужен
overflow: hidden.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Картинка с прямыми углами | нет overflow: hidden |
добавить обрезку |
| Аватар овальный | ширина ≠ высоте | выровнять размеры |
| Тень «грязная» | резкая тень при большом радиусе | увеличить blur |
| Углы «торчат» | внутренний радиус больше внешнего | пересчитать |
Проверьте себя
overflow: hidden?
Вопросы и ответы
По часовой стрелке: верх-лево, верх-право, низ-право, низ-лево.
Через слэш: border-radius: 60px / 40px; — горизонтальный и вертикальный радиусы разные.
Да: border-top-left-radius: 16px; или задайте значения для четырёх углов.
Свойством clip-path — оно умеет многоугольники, круги и эллипсы. Но поддержка сложнее, чем у border-radius.
Итоги
- Скругления —
border-radius; 4 значения идут по часовой стрелке. 50%— круг,999px— «пилюля».- Для обрезки картинок внутри нужен
overflow: hidden. - Радиусы берите из шкалы дизайн-системы.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.