border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

Бесплатный онлайн-генератор радиуса границы — визуальный редактор CSS

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

Что такое генератор радиуса границы?

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

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

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

1. Выберите пресет — начните с закругленных, каплевидных, органических, листьев, капель или морфологических форм.
2. Настройте ползунки — управляйте каждым углом отдельно или связывайте их вместе.
3. Установите размеры — измените ширину и высоту, чтобы соответствовать вашему элементу.
4. Настройте цвета — задайте цвет рамки и фон предварительного просмотра.
5. Скопируйте CSS — нажмите кнопку копирования и вставьте в ваш лист стилей.

Основные функции

Функция	Преимущество
Отдельное управление углами	Настраивайте каждый угол отдельно для уникальных форм
Связывание/развязывание углов	Переключайтесь между одинаковыми и кастомными углами
6 пресетов форм	Быстрый старт с распространенными шаблонами border-radius
Контроллеры ширины и высоты	Соответствие размерам ваших элементов
Живой предварительный просмотр	Сразу видите, как форма меняется при настройке
Копирование в буфер обмена	Однократный экспорт CSS

Понимание CSS border-radius

Синтаксис

Свойство border-radius принимает до четырех значений, по одному на каждый угол:

border-radius: top-left top-right bottom-right bottom-left;

Модель значений	Углы, затронутые
16px	Все четыре угла одинаково
16px 8px	Верхний левый + нижний правый / верхний правый + нижний левый
16px 8px 4px	Верхний левый / верхний правый + нижний левый / нижний правый
16px 8px 4px 2px	Каждый угол отдельно

Пиксели против процентов

• Пиксели (px): Фиксированный радиус угла, независимо от размера элемента.
• Проценты (%): Относительные к размерам элемента. 50% на квадрате создают идеальный круг; 50% на прямоугольнике создают эллипс.

Использование процентов для создания кругов и капель

border-radius: 50% создает идеальный круг, когда ширина равна высоте. Для каплевидных кнопок используйте большое значение в пикселях (например, 999px) — это гарантирует, что радиус всегда превышает половину меньшего измерения, создавая полностью закругленные концы, независимо от размера элемента.

Сравнение пресетов форм

Пресет	Значения	Сценарий использования
Закругленный	16px uniform	Карты, модалы, изображения
Капля	999px uniform	Кнопки, теги, значки
Органическая форма	60px 40px 70px 30px	Декоративные элементы, герой-секции
Лист	0 100px 0 100px	Органические элементы UI, декоративные разделители
Капля	0 100px 100px 0	Подсказки, выделения, указатели
Морф	30px 70px 50px 80px	Абстрактные формы, фоны

Реальные примеры использования

Стилизация кнопок

Создайте каплевидные кнопки с border-radius: 999px для современного, дружелюбного вида, используемого большинством систем дизайна.

Компоненты карточек

Незаметное закругление (8–16px) смягчает края карточек и создает визуальную иерархию без отвлечения.

Профильные аватары

Используйте border-radius: 50% на квадратных изображениях для создания круговых аватаров, распространенных в социальных приложениях и панелях управления.

Декоративные формы

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

Пользовательские подсказки

Используйте смешанные значения (например, 8px 8px 8px 0) для создания подсказки с острым углом, указывающим на элемент триггера.

Советы для лучшего border-radius

Совет	Объяснение
Соблюдайте последовательность	Используйте одинаковые радиусы по всей системе дизайна (например, 8px для маленьких, 16px для больших).
Используйте относительные единицы	Для адаптивных кругов используйте 50% вместо фиксированного значения в пикселях.
Крупные значения для капель	Используйте 9999px или 999px, чтобы гарантировать полностью закругленные концы на любом элементе.
Развязывайте для органических форм	Асимметричные углы создают интересные, уникальные формы.
Учитывайте содержимое	Убедитесь, что текст и внутреннее содержимое не выглядят неправильно.
Тестируйте на разных устройствах	Проверяйте отображение на мобильных и десктопных устройствах.

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

Что происходит, если радиус границы больше элемента?

Если радиус границы превышает размеры элемента, часть фона и содержимого будет видна за пределами границы. Это может быть полезно для создания эффектов, но требует тщательного контроля.

Можно ли использовать border-radius с другими свойствами?

Да, border-radius можно комбинировать с другими свойствами CSS, такими как box-shadow, background, transition и т.д. Это позволяет создавать сложные визуальные эффекты.

Поддерживает ли border-radius все браузеры?

Да, border-radius поддерживается всеми современными браузерами, включая Chrome, Firefox, Safari, Edge и Opera. Однако для старых версий может потребоваться использование префиксов, таких как -webkit- или -moz-.

Можно ли анимировать border-radius?

Да, вы можете анимировать border-radius с помощью CSS-анимации или переходов (transition). Это позволяет создавать плавные эффекты изменения формы элемента.