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

• Живой предпросмотр и мгновенный CSS: генератор обновляет живой предпросмотр и вывод CSS при каждом изменении — без кнопок. Смотрите, как каждый радиус угла влияет на форму, и копируйте CSS-декларацию в один клик.
• Единые настройки и настройки по углам: переключайтесь между единым режимом (один ползунок для всех углов) и режимом по углам (независимые значения для каждого угла). Выбирайте единицу — px для стандартных блоков и % для эллиптических форм.
• 100 % приватно — без загрузки файлов: вся генерация border-radius происходит локально в вашем браузере. Ваши дизайнерские решения никогда не покидают устройство и не отправляются на сервер — безопасно для клиентских проектов и проприетарных дизайн-систем.
• Бесплатно и без ограничений: создавайте неограниченное количество стилей border-radius без регистрации, подписки и лимитов использования. Генератор полностью бесплатен навсегда и без рекламы, блокирующей интерфейс.

• Дизайн карточек и компонентов: UI-дизайнеры используют генератор для стилизации карточек, модальных окон, подсказок и выпадающих меню. Визуальный предпросмотр помогает найти идеальный радиус угла под дизайн-систему — от деликатных 4 px до щедрых 16 px.
• Передача дизайна в код: дизайнеры используют генератор, чтобы извлечь точные CSS-значения из макетов и передать их разработчикам. Больше не нужно измерять пиксели или угадывать — скопируйте точную CSS-декларацию border-radius и вставьте её в код.
• Стилизация изображений и аватаров: веб-разработчики используют генератор для стилизации аватаров профиля (круглые при 50 %), изображений товаров (скруглённые при 8–12 px) и галерей миниатюр. Режим % создаёт идеальные эллиптические и круглые формы для изображений с любым соотношением сторон.
• Дизайн интерфейса мобильных приложений: мобильные разработчики используют генератор для стилизации форм кнопок, краёв карточек и заголовков нижних панелей. Управление по углам позволяет создавать асимметричные формы по современным паттернам мобильного UI, например squircle-иконку в стиле iOS.
• Изучение и эксперименты с CSS: фронтенд-разработчики, изучающие CSS, используют генератор, чтобы визуально понять, как работает border-radius. Живой предпросмотр и управление по углам позволяют увидеть, как каждое значение влияет на итоговую форму, — идеальный инструмент для изучения CSS.
• Стилизация кнопок и элементов форм: UX-разработчики используют генератор для стилизации кнопок, полей ввода, строк поиска и элементов форм. Одинаковый border-radius у связанных элементов форм создаёт визуальную согласованность и отточенный пользовательский опыт.

Свойство CSS border-radius скругляет углы внешней границы элемента. Можно задать один радиус для всех четырёх углов (одним значением, например border-radius: 8px), два значения для диагональных пар (8px 16px) или четыре значения для каждого угла отдельно (8px 4px 8px 4px). Порядок: верхний левый, верхний правый, нижний правый, нижний левый — по часовой стрелке, начиная сверху. Наш генератор border-radius обрабатывает все эти форматы и выдаёт чистый CSS, готовый к продакшену.

1. Выберите режим ввода: используйте единый режим, чтобы управлять всеми четырьмя углами одним ползунком, — идеально для согласованного скругления. Переключитесь в режим по углам, чтобы задать каждый угол независимо с помощью отдельных числовых полей, расположенных в сетке 2×2, повторяющей строение элемента.
2. Настройте значения и единицу: перетащите ползунок или введите значения напрямую. Переключайтесь между px (пиксели для скругления фиксированного размера) и % (проценты для эллиптических/круглых форм). Живой предпросмотр обновляется мгновенно, показывая точные значения радиуса каждого угла поверх поля предпросмотра.
3. Скопируйте CSS: нажмите «Копировать CSS», чтобы скопировать готовую к продакшену CSS-декларацию в буфер обмена. Генератор выдаёт оптимальный сокращённый формат — одно значение, два значения или четыре значения в зависимости от конфигурации углов.

• px (пиксели): скругление фиксированного размера, которое не меняется при изменении размера элемента. Используйте px для стандартных UI-компонентов, таких как кнопки, карточки и модальные окна, где нужна согласованность скругления независимо от размера элемента. Значения обычно варьируются от 2 px (деликатно) до 24 px (сильно скруглено).
• % (проценты): относительное скругление, масштабирующееся вместе с размером элемента. Используйте 50 %, чтобы создать идеальный круг или форму пилюли. Используйте меньшие проценты для эллиптического скругления, адаптирующегося к разным размерам элемента. Процентные значения для круглых форм ограничены 50 %.

Свойство border-radius поддерживается во всех современных браузерах без вендорных префиксов. Оно также поддерживает варианты логических свойств border-start-start-radius и другие для поддержки RTL и вертикальных режимов письма. Для круглых элементов используйте 50 %; для кнопок-пилюль используйте значение больше высоты элемента (например, 9999px), которое ограничивается максимально возможным радиусом.