🛝Toolio
О нас Контакты

Генератор CSS Border-Radius

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

Предварительный просмотр
Режим
%
Диаграмма углов
TL TR BL BR
CSS Вывод

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

Об инструменте

Этот генератор CSS Border-Radius предоставляет три режима редактирования в одном бесплатном, работающем офлайн инструменте: Простой режим позволяет настраивать все четыре угла одновременно, Режим по углам позволяет точно настраивать каждый угол отдельно, а Эллиптический режим позволяет устанавливать отдельные горизонтальные и вертикальные радиусы для каждого угла — полная мощь сокращённого синтаксиса CSS border-radius. Живая диаграмма SVG углов отражает каждое изменение в реальном времени, а кнопка Blob Randomize использует криптографически случайный алгоритм для создания органических форм, популярных в современном дизайне интерфейсов. Поскольку всё работает в вашем браузере, ваши дизайны остаются приватными, а инструмент работает даже без подключения к интернету.

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

  1. Выберите режим — Простой (все углы), Режим по углам или Эллиптический (отдельные x/y радиусы) — с помощью кнопок в верхней части панели управления.
  2. Перетаскивайте ползунки или введите значения напрямую в поля ввода чисел, чтобы установить радиус для каждого угла. Живой предварительный просмотр и диаграмма SVG обновляются мгновенно.
  3. Нажмите Blob Randomize, чтобы сгенерировать случайную органическую форму с независимыми эллиптическими радиусами — отлично подходит для декоративных элементов интерфейса и фонов главных разделов.
  4. Просмотрите сгенерированный сокращённый CSS в поле вывода — инструмент автоматически применяет кратчайший допустимый синтаксис (например, объединяет одинаковые значения).
  5. Нажмите Копировать CSS, чтобы скопировать код в буфер обмена, затем вставьте его напрямую в ваш стиль или инструмент дизайна.

Частые вопросы

Этот генератор CSS Border-Radius полностью бесплатен?
Да, 100% бесплатный без аккаунта, подписки и скрытых ограничений. Откройте страницу и сразу начните генерировать CSS border-radius.
Работает ли инструмент без подключения к интернету?
Да. Инструмент работает полностью в вашем браузере без вызовов сервера. После загрузки страницы вы можете отключиться от интернета, и инструмент продолжит работать. Ваши последние настройки также сохраняются локально в вашем браузере.
Мои данные дизайна остаются в секрете?
Полностью. Никакие данные никогда не покидают ваш браузер — нет загрузки, нет аналитики ваших вводов и нет хранения на сервере. Всё остаётся на вашем устройстве.
Что делает режим Эллиптический?
Режим Эллиптический позволяет устанавливать отдельные горизонтальные (x) и вертикальные (y) радиусы для каждого из четырёх углов, создавая полный сокращённый синтаксис CSS border-radius с обозначением через косую черту — например, border-radius: 40% 20% / 20% 40%. Это открывает асимметричные и яйцевидные формы, которые невозможно создать в режимах Простой и Режим по углам.
Для чего нужна кнопка Blob Randomize?
Blob Randomize использует криптографически случайный алгоритм для генерации органической, неправильной формы, назначая случайные эллиптические радиусы всем восьми комбинациям осей углов. Это идеально подходит для создания текучих форм, популярных в современных лендинг-страницах, аватарах и декоративных фонах — всего с одним кликом.
Загружает ли этот инструмент мои данные?
Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.