⬭

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

Визуальный CSS-генератор скругления углов с превью и экспортом кода

Цвет фигуры

Цвет обводки

Фон области

Эффекты

12px

Перетаскивайте углы фигуры для изменения

220px

Все углы

Готовые формы

border-radius: 12px;

Значение:12px

Tailwind:rounded-xl

Генератор border-radius — онлайн

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

Border-radius — одно из базовых свойств CSS3 для оформления интерфейсов. Простое свойство создаёт закруглённые кнопки, карточки, аватары. Более сложные значения с эллиптическими радиусами дают возможность создавать листовидные, лепестковые и другие нестандартные формы.

Возможности border-radius

Простой синтаксис: border-radius: 10px создаёт круглые углы 10 пикселей. Расширенный: border-radius: 10px 20px 30px 40px — разные радиусы для каждого угла (сверху-слева, сверху-справа, снизу-справа, снизу-слева). Эллиптические: border-radius: 50% 25% создаёт более сложные формы.

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

Применение в дизайне

Закруглённые углы делают интерфейс более дружелюбным и современным. Резкие прямые углы ассоциируются с техническим, сухим стилем. Плавные закругления — с естественностью и теплотой. Выбор стиля зависит от характера бренда и целевой аудитории.

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

💡

Пример: дизайн карточки товара

Дизайнер создаёт карточку товара для интернет-магазина

Открывает генератор border-radius

Настраивает border-radius: 12px для всех углов

Копирует готовый CSS-код

Вставляет в стили — карточка выглядит современно и дружелюбно

🧠

Знаете ли вы?

🎨

CSS border-radius появился в 2009 году с CSS3

💎

Максимальный радиус создаёт круг при квадратном элементе

📱

iOS и Android активно используют закруглённые углы в UI

⚡

Можно задать разные радиусы для каждого угла

🎯

Значения в % относительны к размеру элемента

💡

Эллиптические радиусы дают нестандартные формы

Справочник по синтаксису CSS border-radius

Запись	Описание	Пример
border-radius: A;	Все 4 угла одинаковые	border-radius: 12px;
border-radius: A B;	Верх-лев/низ-прав и верх-прав/низ-лев	border-radius: 10px 30px;
border-radius: A B C;	Верх-лев, верх-прав/низ-лев, низ-прав	border-radius: 10px 20px 30px;
border-radius: A B C D;	Все 4 угла по отдельности (по часовой)	border-radius: 10px 20px 30px 40px;
border-radius: A / B;	Эллиптическое скругление (гориз / верт)	border-radius: 50% / 30%;

💡

Важно знать

Используйте небольшие радиусы (4-12 px) для единообразия дизайна. Слишком разные значения на одной странице делают интерфейс визуально хаотичным и непрофессиональным.

Как использовать генератор border-radius — пошаговая инструкция

Выберите режим связывания углов

Нажмите кнопку «Связано» для одновременного изменения всех углов, или «Раздельно» для индивидуальной настройки каждого угла. Это удобно, когда нужно скруглить только верхние углы карточки или создать асимметричную форму.

Настройте радиус скругления

Перемещайте ползунки или вводите значения в числовые поля. Также можно перетаскивать углы фигуры прямо на превью. Выберите единицы измерения: px для точных значений в пикселях, % для пропорционального скругления, em или rem для адаптивной верстки.

Используйте пресеты или эллиптический режим

Выберите одну из 12 готовых форм для быстрого старта: круг, капсула, капля, лист и другие. Для сложных органических форм включите режим «Эллипс», задающий отдельно горизонтальный и вертикальный радиус каждого угла.

Скопируйте сгенерированный CSS-код

Под превью отображается готовый CSS-код. Скопируйте значение свойства, полную CSS-строку или блок кода с классом. На вкладке «CSS код» доступна кроссбраузерная версия с вендорными префиксами. Если подходящий класс Tailwind найден, он тоже показывается.

💡 Советы по использованию border-radius в проектах

🎨 Дизайн кнопок и ссылок

Подберите идеальное скругление для кнопок: от слегка скругленных (4-8px) для строгого стиля до полностью круглых (9999px) для pill-кнопок. Визуальный генератор позволяет сравнить варианты мгновенно, не переключаясь между редактором кода и браузером.

🖼️ Скругление изображений и аватаров

Круглые аватары (border-radius: 50%), слегка скругленные карточки с изображениями (8-16px) или нестандартные формы для декоративных блоков — генератор поможет получить точный код CSS для любого варианта оформления медиа-элементов.

📱 Карточки и модальные окна

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

✨ Декоративные формы без SVG

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

Частые вопросы о CSS border-radius

Что такое border-radius в CSS?

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

Как сделать круг с помощью border-radius?

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

Что такое эллиптический border-radius и зачем он нужен?

Эллиптический border-radius задается через слеш: горизонтальные радиусы / вертикальные радиусы. Например, border-radius: 50px 50px 50px 50px / 25px 25px 25px 25px. Это позволяет создать скругление, вытянутое по одной из осей, формируя органические, каплевидные или волнистые формы, недоступные при обычном равномерном скруглении.

Какие единицы измерения лучше использовать для border-radius?

Пиксели (px) обеспечивают фиксированное скругление вне зависимости от размера элемента. Проценты (%) масштабируются пропорционально размерам элемента — 50% превращает квадрат в круг. Единицы em и rem привязаны к размеру шрифта и удобны в адаптивной верстке, когда скругление должно масштабироваться вместе с типографикой.

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

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

Как использовать border-radius в Tailwind CSS?

Tailwind CSS предоставляет утилитарные классы: rounded-none (0), rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-3xl (24px) и rounded-full (9999px). Для произвольных значений используется синтаксис rounded-[значение], например rounded-[20px]. Генератор автоматически определяет ближайший класс Tailwind и показывает его рядом с CSS-кодом.

Влияет ли border-radius на производительность сайта?

Само по себе свойство border-radius практически не влияет на производительность. Однако комбинация скругления с тяжелыми свойствами (box-shadow, overflow: hidden, backdrop-filter) может вызвать дополнительную перерисовку. Для оптимальной производительности используйте свойство will-change: transform на анимируемых элементах и избегайте применения border-radius к большому количеству вложенных элементов одновременно.

Полезная информация

Генератор CSS border-radius постоянно обновляется с учетом изменений стандартов CSS и обратной связи пользователей.

Все вычисления и генерация кода выполняются локально в вашем браузере. Никакие данные не передаются на сервер, что гарантирует конфиденциальность и мгновенную работу инструмента. Генератор доступен бесплатно и без регистрации на любом устройстве.

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀