Генератор CSS Border Radius
Визуально создавайте border-radius и получайте готовый CSS-код
Управление Border Radius
Предпросмотр
CSS-код
Примеры использования
Идеальный круг
Создайте идеально круглый элемент с border-radius 50% на всех углах.
Форма капсулы
Создайте кнопку в форме капсулы с большими значениями горизонтального скругления.
Органическая форма
Создавайте уникальные органические формы, задавая разные значения для каждого угла.
Возможности
Предпросмотр в реальном времени
Наблюдайте, как эффект border-radius обновляется мгновенно при движении ползунков
Управление каждым углом
Настраивайте каждый угол отдельно или свяжите все для единообразного скругления
Пресеты форм
Быстрый доступ к популярным формам: круг, капсула, скруглённый прямоугольник и произвольная
Конфиденциальность
Всё работает в браузере — данные не отправляются на сервер
Как пользоваться?
Настройте углы
Используйте ползунки для настройки скругления каждого угла или включите режим связи для одинаковых значений.
Оцените результат
Наблюдайте, как предпросмотр обновляется мгновенно при изменении значений.
Скопируйте CSS
Нажмите «Копировать CSS», чтобы скопировать сгенерированный код border-radius в буфер обмена.
Часто задаваемые вопросы
Что делает этот инструмент?
Генератор border-radius позволяет визуально проектировать скруглённые углы для любого CSS-элемента. Двигайте ползунки, наблюдайте за обновлением предпросмотра в реальном времени и копируйте сгенерированный CSS одним нажатием. Больше не нужно угадывать пиксельные значения в таблице стилей.
Как работает border-radius в CSS
CSS-свойство border-radius принимает значения в пикселях, процентах или em для каждого угла. Можно задать все четыре угла одним сокращённым значением (border-radius: 10px) или управлять каждым отдельно. Проценты рассчитываются относительно размеров элемента, поэтому 50% на квадрате создаёт круг.
Пресеты и произвольный дизайн
Начните с встроенных пресетов для кругов, капсул и скруглённых прямоугольников. Или экспериментируйте с асимметричными значениями на каждом углу для создания органических, каплевидных форм, популярных в современном UI-дизайне.
Работает во всех современных браузерах
Свойство border-radius поддерживается всеми основными браузерами: Chrome, Firefox, Safari и Edge. Сокращённый синтаксис, генерируемый этим инструментом, обеспечивает максимальную совместимость — вставляйте код прямо в проект без вендорных префиксов.
Конфиденциальность и скорость
Инструмент работает на 100% в браузере. Никаких запросов к серверу, никакого отслеживания ваших дизайнов, никакой регистрации. Просто откройте страницу и начинайте проектировать.