Генератор CSS border-radius

Выберите форму или настройте каждый угол отдельно. Генератор показывает скругление блока и создаёт border-radius в пикселях или процентах.

Как пользоваться
  • Выберите основу на вкладке «Формы» галереи: карточку, капсулу, каплю, органическую форму и другие.
  • Маркеры стоят снаружи фигуры: круглые задают горизонтальные радиусы, квадратные — вертикальные. Тяните их мышью или двигайте стрелками, с Shift — на 10. Точные значения введите в поля углов.
  • «Связать значения»: «Все углы» — любая правка меняет все радиусы, «Круглые углы» — X и Y каждого угла равны, «Пропорции угла» — правка X или Y угла пропорционально меняет вторую ось этого угла, не трогая остальные, «Свободно» — каждый радиус отдельно. Связь применяется сразу при переключении. Единицы px, % и rem переключаются для всех углов; px и rem пересчитываются друг в друга (1rem = 16px).
  • Включите «Анимировать» в группе «Режим редактирования», чтобы скругление перетекало между кадрами. Ваша форма станет кадром «Начало», «Конец» начнётся с её копии — настройте его углами или формой из галереи. Перетащите кадр, чтобы поменять их местами. Готовые перетекания — на вкладке «Анимация» галереи: оба их кадра тоже можно доработать.
  • «Поделиться» копирует ссылку с текущими настройками.
Как читать CSS border-radius

Значения идут по часовой стрелке, начиная с верхнего левого угла. Если значений меньше четырёх, недостающие повторяются:

  • border-radius: 24px — все четыре угла одинаковые;
  • border-radius: 24px 8px — верхний левый и нижний правый 24px, остальные 8px;
  • border-radius: 24px 8px 0 — верхний левый 24px, верхний правый и нижний левый 8px, нижний правый 0;
  • border-radius: 24px 8px 0 4px — каждый угол отдельно по часовой стрелке.

Косая черта / делит радиусы на горизонтальные (до неё) и вертикальные (после неё). Например, 50% 20% / 10% 40% даёт эллиптические углы: по ширине — 50% и 20%, по высоте — 10% и 40%. Без косой черты оба радиуса угла равны, и скругление круговое.

Проценты считаются от размеров элемента: горизонтальный радиус — от ширины, вертикальный — от высоты. Если соседние радиусы не помещаются вдоль стороны, браузер пропорционально уменьшает их, поэтому 50% у всех углов даёт овал.

Радиус скругляет фон и границу самого элемента. Для обрезки вложенного содержимого может понадобиться overflow: hidden.

Для вашего удобства рекомендую использовать полноэкранный режим.

Предпросмотр

Фон предпросмотра
Пропорции элемента

Круглые точки задают горизонтальные радиусы, квадратные — вертикальные. Их можно двигать мышью, касанием или стрелками; Shift увеличивает шаг. Если соседние радиусы не помещаются вдоль стороны, браузер пропорционально уменьшает их: маркеры показывают заданные значения, а контур — итоговое скругление.

Настройка углов

Режим редактирования

Включите анимацию, чтобы настроить кадры «Начало» и «Конец»: поля углов ниже относятся к выбранному кадру. px и rem пересчитываются друг в друга (1rem = 16px), а при переходе к процентам сохраняются числа. В процентах X зависит от ширины, Y — от высоты.

Связать значения

Готовый CSS

Включите JavaScript для редактирования. Пример скругляет все углы на 24px.

Скругление углов

.shape {
  border-radius: 24px;
}

Подробнее — в справочнике border-radius. Для многоугольных силуэтов используйте генератор clip-path.