Что такое border-radius?
Давайте начнем с основного. Border-radius — это CSS-свойство, которое позволяет скруглить углы элемента. Оно появилось в стандартных браузерах достаточно давно и стало неотъемлемой частью веб-дизайна: с его помощью можно убрать угловатость и добавить «мягкости» в любые визуальные блоки. Но почему именно это свойство так популярно?
Его стандартное использование выглядит так:
css
div {
border: 2px solid #000;
border-radius: 10px;
}В этом примере у блока div появляется черная рамка с толщиной 2 пикселя и радиусом скругления 10 пикселей. Чем больше значение радиуса, тем более выраженным становится скругление.
Пример 1: Простое скругление углов
css
div {
width: 200px;
height: 200px;
border: 3px solid #444;
border-radius: 20px;
}Этот пример создает квадрат с радиусом скругления 20 пикселей, что придает ему округлые углы.
Пример 2: Полный круг
Чтобы элемент стал круглым, достаточно установить значение радиуса в 50% от его ширины и высоты. Это идеальный способ создания аватарок или кнопок:
css
img {
width: 100px;
height: 100px;
border-radius: 50%;
}Здесь изображение становится кругом, так как радиус составляет ровно 50% от его ширины и высоты.
Как скруглить один или несколько углов
Иногда бывает нужно скруглить не все углы элемента, а только определенные. Это можно сделать, задав индивидуальные значения для каждого угла.
Скругление конкретного угла
css
div {
border: 2px solid #000;
border-top-left-radius: 15px;
}В этом примере скругляется только верхний левый угол.
Аналогично можно скруглить и другие углы:
css
div {
border: 2px solid #000;
border-top-right-radius: 15px;
}Для нижних углов синтаксис будет таким:
css
div {
border: 2px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}Скругление нескольких углов
Чтобы скруглить одновременно несколько углов, достаточно указать радиус для каждого из них. Например, если нужно округлить только верхние углы:
css
div {
border: 2px solid #000;
border-radius: 15px 15px 0 0;
}Здесь первое и второе значение отвечают за верхний левый и правый углы, а третье и четвертое — за нижние углы (которые остаются прямыми, так как установлено значение 0).
Пример с разными радиусами
Зададим разные параметры для каждого из углов:
css
div {
border: 2px solid #000;
border-radius: 10px 20px 30px 40px;
}Здесь верхний левый угол будет иметь радиус 10px, верхний правый — 20px, нижний правый — 30px и нижний левый — 40px.
Скругление всех углов
Поставим единое значение для border-radius:
css
div {
border: 5px solid #000;
border-radius: 15px;
}Это создаст элемент с одинаково округлыми углами.
Сочетание с другими CSS-свойствами
Ниже представлены несколько интересных примеров использования.
С фоном (background-color)
Одним из популярных сочетаний является комбинирование скругления с фоновым цветом.
css
div {
width: 200px;
height: 200px;
background-color: #3498db;
border-radius: 20px;
}Здесь элемент с синим фоном имеет скругленные углы.
С изображениями
С border-radius легко поменять форму изображения на круг или эллипс. Этот способ используется для создания аватарок пользователей, логотипов и других элементов.
css
img {
width: 150px;
height: 150px;
border-radius: 50%;
}Изображение будет круглым за счет радиуса 50%.
С тенью (box-shadow)
Скругление углов в сочетании с тенью может значительно улучшить восприятие элемента, добавив ему объем и эффект «выпуклости»:
css
div {
width: 200px;
height: 200px;
background-color: #e74c3c;
border-radius: 25px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}Элемент будет выглядеть объемным благодаря тени, которая выделяет его на фоне.
С радиальными градиентами
Иногда эффект скругления используется с градиентами, например, на кнопках или иконках:
css
div {
width: 200px;
height: 200px;
background: radial-gradient(circle, #ff7e5f, #feb47b);
border-radius: 50%;
}В этом случае создается круглый элемент с радиальным градиентом, который выглядит как стильная кнопка.
С псевдоэлементами
Применяйте ::before и ::after с border-radius для формирования декоративных объектов:
css
div::after {
content: '';
width: 100px;
height: 100px;
background-color: #f39c12;
border-radius: 50%;
}Это создаст маленький круглый элемент внутри родительского блока.
Поддержка браузерами
Свойство border-radius поддерживается большинством современных браузеров, включая Google Chrome, Mozilla Firefox, Safari, Microsoft Edge и Opera. Это свойство работает на мобильных устройствах и планшетах, включая Safari на iOS и Chrome на Android. Однако старые версии Internet Explorer (до IE8) не поддерживают это свойство: в таких случаях рекомендуется использовать вендорные префиксы.
Пример с вендорными префиксами:
css
div {
-webkit-border-radius: 15px; /* для Safari и Chrome */
-moz-border-radius: 15px; /* для Firefox */
border-radius: 15px; /* стандарт */
}Эти префиксы обеспечивают совместимость с устаревшими версиями браузеров.
Заключение
Соединяйте border-radius с другими свойствами CSS различными способами для достижения нужного результата.
- Сочетание с градиентами. Используйте радиальные и линейные градиенты с округлыми углами, чтобы создавать стильные и визуально привлекательные элементы, такие как кнопки или фоны.
- Работа с тенями. Комбинируйте border-radius с box-shadow: это позволит сформировать элементы, которые выглядят объемными и визуально выделяются на фоне страницы как выпуклые.
- Применение трансформаций. Облегчит создание динамичных эффектов.
- Точечное скругление. Применяя радиус только к отдельным углам, можно добиться нестандартных, индивидуальных форм для разных элементов на странице.
Применяйте border-radius для лучшего восприятия интерфейса пользователями:
- для создания кнопок. Слегка закругленные углы сделают их визуально более аккуратными и приятными на вид;
- для аватарок и изображений. Чтобы создать интересный и современный облик иконок, используйте скругления для этих элементов изображений;
- для модальных окон и карточек. Скругленные углы на блоках с контентом придают элементам «воздушность», снижают визуальную тяжесть интерфейса;
- интерактивные элементы. Сочетайте скругления с эффектами наведения и анимациями: это поможет улучшить пользовательский опыт.
Комбинируйте, пробуйте способы на практике и не бойтесь выходить за рамки стандартных решений.