border-radius CSS: от основ до сложных фигур

Синтаксис позволяет задавать от одного до четырех значений, которые применяются к углам по часовой стрелке, начиная с верхнего левого:

1. Одно значение: применяется ко всем четырем углам. border-radius: 20px;
2. Два значения: первое — для верхнего-левого и нижнего-правого углов, второе — для верхнего-правого и нижнего-левого. border-radius: 10px 30px;
3. Три значения: первое — верхний-левый, второе — верхний-правый и нижний-левый, третье — нижний-правый. border-radius: 10px 5% 20px;
4. Четыре значения: каждое значение для своего угла: верхний-левый, верхний-правый, нижний-правый, нижний-левый. border-radius: 10px 20px 30px 40px;

Для точечного управления существуют и отдельные свойства для каждого угла: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Их использование делает код более читаемым и соответствует принципу DRY (Don’t Repeat Yourself).

/* Вместо повторения одного значения три раза */
.old-way {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 0;
}

/* Более элегантный и сухой способ */
.new-way {
    border-radius: 15px 15px 0 15px; /* или */
    border-bottom-right-radius: 0;
}

Пример 1

Чтобы создать с помощью border-radius не только круг, но и эллипс, нужно использовать проценты в качестве единиц измерения, а именно 50%. Для круга форма должна быть квадратной, для эллипса — прямоугольной.

.circle {
    /* Квадратный блок станет кругом */
    border-radius: 50%;
}
.ellipse {
    /* Прямоугольный блок станет эллипсом */
    border-radius: 50%;
}

Пример 2

Именно проценты придают настоящую магию и адаптивность формам. Когда вы задаете радиус в процентах, а также используете слэш(/), он вычисляется относительно размеров блока: горизонтальный радиус — от ширины, вертикальный — от высоты. Это позволяет создавать формы, которые идеально масштабируются при изменении размеров контейнера.

Какие фигуры можно создать с помощью комбинации радиусов в процентах?

• Полуэллипс: border-radius: 50% / 100% 100% 0 0; (скруглены только верхние углы).
• Четверть эллипса: border-radius: 100% 0 0 0; (скруглен только верхний левый угол).
• «Яйцо»: Комбинируя разные проценты для верхних и нижних углов, можно получить яйцевидную форму, например: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;.

<div class="shape semi-ellipse">Полуэллипс</div>
<div class="shape quarter-ellipse">Четверть эллипса</div>
<div class="shape egg">Яйцо</div>

.shape { width: 200px; height: 120px; margin: 20px; display: inline-block; background: #4CAF50; }
.semi-ellipse { border-radius: 50% / 100% 100% 0 0; }
.quarter-ellipse { border-radius: 100% 0 0 0; }
.egg { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

Пример 3

Одно из самых важных и неочевидных правил border-radius в CSS — это алгоритм масштабирования. Что произойдет, если сумма радиусов двух смежных углов (например, border-top-left-radius и border-top-right-radius) превысит ширину элемента?

Спецификация CSS диктует, что браузер должен пропорционально уменьшить все радиусы, пока они не перестанут «пересекаться»

Простыми словами: если ваши заданные радиусы не помещаются в границы элемента, они все будут одинаково уменьшены. Это гарантирует визуальную целостность формы. Например, если для элемента шириной 300px задать border-radius: 200px;, браузер автоматически уменьшит его до 150px (половина ширины), создав идеальный круг.

Эта логика особенно критична при работе с процентами и разными значениями для углов. Всегда проверяйте итоговый вид, особенно в адаптивном дизайне.

Название свойства border-radius («радиус границы») не случайно, хотя оно и работает без видимой границы. Его главная задача — скруглить именно внешний край border-box элемента. Это становится критически важным при добавлении рамки (border).

Внутренний радиус скругления (где заканчивается border и начинается padding) вычисляется как внешний радиус минус толщина рамки. Если результат отрицательный, внутренний радиус становится нулевым.

.box-with-border {    
    border: 15px solid #FFA2A2;
    border-radius: 40px; /* Внешний радиус 40px */
    /* Внутренний радиус: max(0, 40px - 30px) = 10px */
}

Пример 4

Проблема с outline

Свойство outline не следует за скруглением, создавая прямоугольное выделение вокруг элемента, что часто ломает визуальный образ. Решение — использовать box-shadow с нулевым размытием и положительным spread-radius для имитации контура: box-shadow: 0 0 0 3px #f00;. Такой «контур» будет идеально повторять скругления.

Тень (box-shadow) — лучший друг border-radius. Она в точности повторяет скругленную форму элемента, а ее параметр spread-radius увеличивает или уменьшает радиус этой тени, что можно использовать для создания сложных эффектов.

К сожалению, border-radius не влияет на обтекание текстом внутреннего содержимого. Текст всегда обтекается прямоугольником. Это можно исправить несколькими способами:

1. overflow: hidden — обрежет текст, выходящий за скругленные границы.
2. Внутренние отступы (padding) — отодвинут текст от краев, создав безопасную зону.
3. Будущее: CSS Shapes — экспериментальное свойство shape-inside позволит обтекать текст по произвольной форме, включая скругленный прямоугольник, но требует дублирования значений радиуса.

Отличная новость: border-radius полностью анимируем! Вы можете плавно изменять скругления с помощью transition или создавать ключевые кадры (@keyframes) для сложных анимаций, превращая квадраты в круги, создавая «пульсирующие» или «танцующие» элементы. Анимация работает даже между разными типами значений (например, из 20px в 50%).

.animated-button {
    border-radius: 10px;
    transition: border-radius 0.5s ease;
}
.animated-button:hover {
    border-radius: 50%;
}
@keyframes morph {
    0%, 100% { border-radius: 50% / 30%; } /* Эллипс */
    50% { border-radius: 30% / 50%; } /* Другой эллипс */
}
.morphing-element {
    animation: morph 3s infinite alternate;
}

Пример 5

Не изобретайте велосипед! Сообщество уже создало множество впечатляющих демонстраций, показывающих мощь border-radius.

• Кнопки и интерфейсы: Используйте эллиптические скругления и разные радиусы для углов, чтобы создавать уникальные, запоминающиеся элементы управления.
• Генераторы форм: Интерактивные демо, где изменение ползунка в реальном времени меняет border-radius каждого угла, помогают быстро найти нужную форму и скопировать CSS-код.
• Симуляция сложных фигур: С помощью нескольких элементов с border-radius и градиентами можно имитировать шестиугольники, звезды и другие фигуры, которые пока не поддерживаются нативно.

Помните, что границы творчества определяются только вашей фантазией и пониманием спецификации.

В этом разделе мы собрали и подробно ответили на самые распространенные вопросы о свойстве border-radius в CSS, которые возникают как у начинающих, так и у опытных разработчиков.

Следующий шаг в эволюции скруглений — это свойство corner-shape. Оно открывает дверь в мир настоящих геометрических фигур без костылей с градиентами и множеством HTML-элементов.

С его помощью создать скос (bevel), вырез (notch) или даже стрелку для навигационной цепочки (breadcrumb) станет делом одной строки CSS. Представьте: corner-shape: bevel notch round scoop;. Это свойство принципиально изменит подход к созданию декоративных элементов в веб-дизайне.

На момент написания этот статьи это свойство реализовано в Chrome и Edge, поэтому пока для создания сложных скосов и срезов разработчики используют хитрости с линейными и коническими градиентами в качестве фона, имитируя нужную форму.

Если вы хотите, чтобы ваш сайт выделялся не только контентом, но и безупречным, современным дизайном, где каждая деталь, каждая скругленная кнопка или уникальная графическая форма работают на вашу уникальность и удобство пользователей? Наша веб-студия воплотит самые смелые идеи в чистый, эффективный код и запоминающийся визуал. Давайте создадим что-то особенное вместе!