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

Двигайте ползунки, чтобы скруглить каждый угол окна предпросмотра, и копируйте итоговый CSS-код border-radius. Заблокируйте все четыре угла вместе для простого скруглённого прямоугольника или разблокируйте их, чтобы создать форму таблетки, листа или асимметричные пятна.

Что это за инструмент?

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

Этот инструмент избавляет от догадок: двигаете ползунок, видите, как угол скругляется в предпросмотре в реальном времени, и считываете точный CSS из сгенерированного блока кода. Один переключатель блокировки переключает между единым радиусом (все четыре угла одинаковы, самый частый случай) и четырьмя независимыми ползунками для органичных, асимметричных форм.

Зачем его использовать?

Предпросмотр обновляется мгновенно во время перетаскивания — не нужно редактировать CSS и перезагружать страницу, чтобы увидеть результат.
Блокировка в один клик для частого случая «одинаковый радиус на каждом углу»; разблокируйте для кнопок-таблеток, речевых пузырей и произвольных форм.
Выводит сокращённую запись с одним значением, если все углы совпадают, или полную запись из четырёх значений, если нет — в обоих случаях готово к копированию.
Работает полностью в вашем браузере. Ничего из введённого никуда не отправляется.
Бесплатно, без регистрации, работает на мобильных.

Как использовать

Оставьте флажок «заблокировать все 4 угла» включённым и двигайте любой ползунок, чтобы задать единый радиус для всей рамки.
Снимите блокировку, чтобы управлять каждым углом независимо — полезно для таблеток, капель и асимметричных карточек.
Наблюдайте, как окно предпросмотра обновляется в реальном времени при изменении каждого ползунка.
Скопируйте сгенерированный CSS из блока кода и вставьте его в свою таблицу стилей.

Пример

Ввод

Сверху слева: 40px, сверху справа: 8px, снизу справа: 40px, снизу слева: 8px

Результат

border-radius: 40px 8px 40px 8px;

Такие несовпадающие противоположные углы создают силуэт листа или лепестка — распространённый эффект в дизайне карточек и значков.

px или % — какую единицу использовать?

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

Проценты ведут себя иначе — они относительны к собственной ширине и высоте элемента, поэтому радиус 50% на квадратном элементе даёт идеальный круг, а на неквадратном — эллипс. Если вам нужен именно такой эффект (аватары, органичные формы, масштабирующиеся вместе с контейнером), возьмите сгенерированный CSS и вручную замените значения px на %. Например, border-radius: 50% превращает любой квадратный блок в круг.

Распространённые шаблоны border-radius

Скруглённая карточка: все углы одинаковы, примерно 8–16px для UI-компонентов.
Кнопка-таблетка: задайте радиус равным половине высоты элемента (или просто используйте 9999px — он всегда даёт полную таблетку, независимо от высоты).
Круглый аватар: border-radius: 50% на квадратном элементе (равная ширина и высота).
Речевой пузырь: три угла скруглены, один прямой — установите три ползунка высоко, а один на 0.
Форма листа/лепестка: противоположные углы совпадают, соседние — разные, например верхний левый и нижний правый большие, верхний правый и нижний левый маленькие.

Сочетание с тенью

Скруглённые углы редко используются в одиночку — карточкам и кнопкам обычно нужна ещё и тень для глубины. Используйте Генератор box-shadow, чтобы настроить тень, и примените оба сгенерированных фрагмента CSS к одному элементу.

→ Генератор box-shadow · Конвертер единиц измерения

Часто задаваемые вопросы

В каком порядке идут углы в border-radius?

Сокращённая запись CSS всегда следует порядку: сверху слева, сверху справа, снизу справа, снизу слева, по часовой стрелке начиная с верхнего левого угла. Четыре ползунка этого инструмента подписаны в том же порядке, так что запоминать его самостоятельно не нужно.

Можно ли использовать разные единицы для каждого угла?

Да, в реальном CSS можно смешивать px, %, em и rem между углами, хотя на практике это редкость. Этот инструмент для простоты генерирует единые значения в px — замените отдельное значение на % или другую единицу прямо в своей таблице стилей, если нужны смешанные единицы.

Почему border-radius: 50% иногда даёт овал вместо круга?

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

Работает ли border-radius также с фоновыми изображениями и рамками?

Да — border-radius обрезает фон, рамку и (в современных браузерах) box-shadow элемента по скруглённой форме. Он не обрезает выходящее за пределы содержимое дочерних элементов, если только вы не примените overflow: hidden к родителю.

Есть ли предел размера радиуса?

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