Генератор Border Radius

Формируйте углы с большим контролем

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

У каждого угла есть горизонтальный и вертикальный радиус. Когда значения одинаковы, угол круглый, а CSS напоминает привычную декларацию border-radius с четырьмя значениями. Когда X и Y различаются, угол становится эллиптическим, и CSS сначала записывает горизонтальные значения, затем косую черту, а потом вертикальные. Живой предпросмотр делает эту связь наглядной: форма меняется мгновенно при перемещении каждого ползунка.

Когда полезны эллиптические радиусы

Эллиптические углы полезны, когда хочется чего-то более органичного, чем простая карточка, но при этом нужен лёгкий и адаптивный CSS. Они могут сделать аватары, акцентные блоки, формы купонов, маски изображений и декоративные панели менее шаблонными. Асимметричные углы также помогают задать визуальное направление, привлекая внимание к заголовку или призыву к действию. Используйте пресет blob как отправную точку, а затем уменьшите самые сильные значения, если форма начинает отвлекать от содержимого.

Последовательное использование значений радиуса

В продакшен-дизайн-системах стоит держать небольшой набор стандартных радиусов для повседневных компонентов, а собственные значения применять только там, где форма имеет чёткую цель. Кнопка, поле ввода и карточка обычно выглядят более целостно, когда у них родственные размеры углов. Декоративные секции могут быть выразительнее, но и они должны хорошо выглядеть при разной ширине. После копирования сгенерированного CSS проверьте его на реальном размере элемента: радиус, который выглядит сбалансированно на карточке предпросмотра, может оказаться слишком резким на компактном бейдже или слишком слабым на широкой hero-панели.