CSS border-radius: полное руководство с генератором

border-radius — свойство CSS для скругления углов элементов. Один из самых часто используемых приёмов современного веб-дизайна: кнопки, карточки, аватары, модальные окна. Понимание синтаксиса, разницы между пикселями и процентами, а также приёмов для создания кругов, «таблеток» и органических форм помогает быстро реализовывать дизайн без лишнего кода. В этой статье — полный разбор border-radius, типичные формы, поддержка браузеров и практические советы.

Для визуальной настройки скругления используйте Генератор border-radius на reChecker.

Синтаксис border-radius

Одно значение

Скругляет все четыре угла одинаково:

border-radius: 12px;
border-radius: 50%;

Два значения

Первое — верхний левый и нижний правый, второе — верхний правый и нижний левый:

border-radius: 12px 24px;
/* top-left + bottom-right: 12px, top-right + bottom-left: 24px */

Три значения

Первое — верхний левый, второе — верхний правый и нижний левый, третье — нижний правый:

border-radius: 12px 24px 8px;

Четыре значения

По часовой стрелке, начиная с верхнего левого:

border-radius: 12px 24px 8px 16px;
/* top-left, top-right, bottom-right, bottom-left */

Slash notation (эллиптические углы)

Синтаксис horizontal / vertical задаёт горизонтальный и вертикальный радиусы для эллиптического скругления:

border-radius: 50px / 25px;
/* горизонтальный радиус 50px, вертикальный 25px */

Можно комбинировать с несколькими значениями:

border-radius: 50px 20px 50px 20px / 25px 10px 25px 10px;

Пиксели vs проценты

Пиксели (px)

Фиксированное значение. Не зависит от размера элемента. Подходит для кнопок, карточек, когда нужна предсказуемая величина.

.card {
  border-radius: 8px;
}

Проценты (%)

Относительно размеров элемента. Для квадрата border-radius: 50% даёт круг (половина ширины = половина высоты = радиус). Для прямоугольника 50% создаёт эллипс или «таблетку» в зависимости от пропорций.

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* круг */
}

.pill {
  width: 200px;
  height: 40px;
  border-radius: 50%; /* капсула/таблетка */
}

Важно: процент считается от соответствующей стороны (горизонтальный — от ширины, вертикальный — от высоты). На прямоугольниках одинаковые проценты дают разные пиксельные радиусы по осям.

Типичные формы

Круг

Квадратный элемент + border-radius: 50%:

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

Pill (капсула, таблетка)

Прямоугольник с высотой вдвое меньше ширины + border-radius: 50% или большое значение в px:

.pill {
  padding: 8px 24px;
  border-radius: 9999px; /* или 50% */
}

9999px — практический «бесконечный» радиус: углы всегда скруглены по полукругу.

Blob (органическая форма)

Комбинация разных радиусов создаёт мягкие, «органические» формы:

.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Меняя проценты, получают разные варианты blob без SVG.

Скругление только части углов

.card-top {
  border-radius: 12px 12px 0 0;
}

.card-bottom {
  border-radius: 0 0 12px 12px;
}

Асимметричные формы

Комбинируя разные значения для каждого угла, можно создавать нестандартные формы — скошенные карточки, волнообразные края. Для сложных форм часто используют clip-path или SVG, но для простых случаев border-radius достаточно.

.asymmetric {
  border-radius: 20px 5px 20px 5px;
}

Поддержка браузеров

border-radius поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) без префиксов. Для очень старых версий (IE9 и ранее) использовались префиксы -webkit-, -moz-, сегодня они не нужны.

Производительность

border-radius обрабатывается композитным слоем браузера. На производительность влияет мало. Сильное влияние может оказывать box-shadow в сочетании с большим радиусом на анимированных элементах — в таких случаях стоит проверять в DevTools.

Адаптивный дизайн

Фиксированные значения

На малых экранах крупный радиус может «съедать» контент. Используйте clamp или медиа-запросы:

.card {
  border-radius: clamp(8px, 2vw, 24px);
}

Проценты

На адаптивных элементах проценты пересчитываются при изменении размера. Круг остаётся кругом, pill — pill.

Инструмент Border Radius на reChecker

Генератор border-radius на reChecker позволяет:

• Визуально настраивать радиус каждого угла
• Задавать эллиптические углы через slash notation
• Смотреть результат в реальном времени
• Копировать CSS одной кнопкой

Удобно для быстрого подбора значений и экспериментов с blob-формами без ручного расчёта. При изменении значений результат обновляется мгновенно — можно подобрать визуально приятную форму за несколько кликов.

border-radius и другие свойства

Взаимодействие с border

Скругление применяется к внешней границе border. Если border толстый, внутренний угол может выглядеть острее. При border: 0 скругление идёт по краю padding-box.

Взаимодействие с box-shadow

Тень следует за скруглённой формой элемента. При анимации border-radius тень также меняет форму — это может влиять на производительность при частых перерисовках.

Рекомендации

1. Единый стиль — выберите 1–2 значения радиуса для проекта (например, 8px и 16px) и используйте консистентно
2. Доступность — сильное скругление может влиять на читаемость; проверяйте контраст и размер кликабельной области
3. overflow: hidden — при border-radius содержимое обрезается по скруглённой границе; при проблемах с overflow проверьте overflow: hidden на родителе
4. Изображения — для img внутри контейнера задавайте border-radius и overflow: hidden на родителе или используйте object-fit: cover для корректного обрезания

FAQ

Почему border-radius не работает на элементе?

Проверьте: 1) у элемента есть фон или граница (иначе скругление не видно); 2) родитель не обрезает overflow; 3) нет конфликтующих transform или clip-path. Также border-radius не влияет на таблицы с border-collapse: collapse.

В чём разница между px и % в border-radius?

В пикселях радиус фиксирован. В процентах — относительно размеров элемента. Для квадрата 50% даёт круг. Для прямоугольника 50% даёт эллиптическое скругление (половина ширины по горизонтали, половина высоты по вертикали для каждого угла).

Как сделать только один угол скруглённым?

Задайте четыре значения, для ненужных углов — 0: border-radius: 12px 0 0 0 (только верхний левый).

Как создать органическую blob-форму?

Используйте разные проценты для каждого угла в slash notation, например: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. Меняйте значения для разных вариантов. Генератор border-radius на reChecker помогает подобрать визуально.

Какой инструмент использовать для подбора border-radius?

Генератор border-radius на reChecker — бесплатный онлайн-инструмент для визуальной настройки скругления углов. Поддерживает все четыре угла, эллиптические радиусы (slash notation) и выдаёт готовый CSS. Подходит для дизайнеров и разработчиков.