Скруглённые углы придают дизайну мягкость и современность.
С помощью свойства border-radius можно скруглить один угол, пару углов или все сразу — причём задать как равномерные, так и асимметричные значения. В этой статье разберём, как работает border-radius и какие бывают варианты его использования.
Скругление всех углов одинаково
Самый простой вариант:
cssКопироватьРедактировать.box {
border-radius: 10px;
}
Это значит, что все четыре угла скруглены одинаково — по 10 пикселей.
Скругление отдельных углов
Если нужно задать разное скругление, есть четыре отдельных свойства:
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius
Пример:
cssКопироватьРедактировать.box {
border-top-left-radius: 15px;
border-bottom-right-radius: 30px;
}
Скругление с помощью нескольких значений
Свойство border-radius может принимать до четырёх значений:
cssКопироватьРедактировать.box {
border-radius: 10px 20px 30px 40px;
}
Значения идут по часовой стрелке:
- верхний левый
- верхний правый
- нижний правый
- нижний левый
Скругление эллиптической формы
Можно задать два значения через /, чтобы сделать эллипсоидное скругление:
cssКопироватьРедактировать.box {
border-radius: 50px / 20px;
}
Это означает, что радиус по горизонтали — 50px, по вертикали — 20px.
Применение в HTML
htmlКопироватьРедактировать<div style="width: 200px; height: 100px; background: #87CEFA; border-radius: 25px;">
Простой блок с округлыми углами
</div>
Такой блок будет выглядеть аккуратно и мягко.
Советы по использованию
- Используй
border-radius: 50%для создания круга (если ширина и высота равны) - Избегай слишком больших значений на малых элементах — скругление может «съесть» форму
- Комбинируй с
overflow: hiddenдля обрезки содержимого по форме углов
Заключение
Свойство border-radius — мощный инструмент в CSS, который позволяет легко управлять формой углов. Оно поддерживается во всех браузерах и используется повсеместно — от кнопок до карточек. Освоив его, ты сделаешь свои интерфейсы визуально более приятными и современными.