Перейти к контенту
SPCX Tools

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

Визуально настраивайте скругление углов и формы CSS, а затем копируйте код в один клик.

Работает локально — файлы не покидают ваше устройство

Загрузка инструмента…

Как использовать Генератор border-radius

  1. 1Выберите единицу измерения ("px" для фиксированного скругления или "%" для адаптивных форм).
  2. 2Используйте галочку "Связать углы", чтобы изменять все углы одновременно, или снимите её для настройки каждого угла по отдельности.
  3. 3Перетаскивайте ползунки для настройки border-radius и наблюдайте за изменением формы в реальном времени.
  4. 4Также вы можете нажать на одну из кнопок пресетов для быстрого создания популярных форм: капсулы, круга, вкладки или листа.
  5. 5Скопируйте сгенерированный CSS-код внизу страницы для использования в вашей таблице стилей.

Визуальный генератор border-radius

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

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

Закругление углов в CSS

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

Этот CSS-генератор border-radius поможет вам понять и эффективно использовать краткую запись CSS. Если все углы одинаковые, инструмент выдает одно значение (например, border-radius: 16px;). Если разъединить углы для создания нестандартной формы, генератор автоматически отформатирует CSS на основе ваших настроек:

  • Четыре значения: Если все углы разные, CSS применяет их по часовой стрелке, начиная с верхнего левого (например, border-radius: 16px 8px 4px 2px;).
  • Два значения: Если верхний левый угол совпадает с нижним правым, а верхний правый — с нижним левым, инструмент сократит код до двух значений (например, border-radius: 16px 0;).

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

Одна из самых частых проблем при настройке закругления углов в CSS — выбор подходящих единиц измерения. Этот инструмент позволяет легко переключаться между пикселями (px) и процентами (%), каждые из которых решают свои задачи в UI-дизайне.

Пиксели (px) — это абсолютные единицы. Радиус скругления 12px всегда выглядит одинаково, независимо от того, применяется ли он к маленькой кнопке или огромному баннеру. Пиксели — стандартный выбор для таких UI-элементов, как карточки, выпадающие списки и поля ввода, поскольку они обеспечивают строгий и единый стиль во всем приложении. Этот инструмент поддерживает значения до 200px.

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

Больше, чем просто скругление: генератор CSS-фигур

Хотя border-radius обычно используют для плавного скругления, это еще и мощный генератор CSS-фигур. Задавая независимые и экстремальные значения для разных углов, вы можете создавать уникальные геометрические формы без SVG-файлов или сложных clip-path. В инструменте есть несколько пресетов для демонстрации:

  • Капсула: Если задать всем углам заведомо большое значение в пикселях (например, 9999px), получится форма капсулы. Она часто применяется для бейджей, тегов и современных кнопок. Браузер автоматически ограничивает радиус ровно половиной высоты элемента, создавая идеальные полукруги по краям.
  • Круг: Значение 50% для всех углов превращает квадрат в идеальный круг.
  • Лист: Если задать верхнему левому и нижнему правому углам значение 0, а двум другим — большое (например, 48px), получится асимметричная форма листа.
  • Вкладка: Скруглив только верхние углы (например, на 16px) и оставив нижние равными 0, вы получите классическую форму вкладки, которая отлично подходит для меню навигации.

Совершенствование UI-компонентов

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

Подобрав идеальный радиус скругления, вы можете дополнить его другими CSS-эффектами. Попробуйте добавить к новой форме мягкую тень с помощью нашего Генератора теней CSS, чтобы создать эффект парения. Если вы стилизуете кнопку или декоративный элемент, можно задать яркий фон через Генератор CSS-градиентов или подобрать идеальные сочетания цветов в Генераторе цветовых палитр.

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

Что такое свойство border-radius в CSS?
Свойство border-radius в CSS скругляет углы внешней границы элемента. Можно задать единый радиус для создания круга или прямоугольника со скругленными углами, либо указать разные значения для каждого угла, чтобы получить сложные фигуры.
Что использовать: пиксели (px) или проценты (%)?
Используйте пиксели (px) для фиксированного скругления, не зависящего от размера элемента (например, стандартные карточки с радиусом 8px). Проценты (%) подходят, когда нужно, чтобы скругление масштабировалось вместе с элементом — например, 50% для создания идеального круга или овала.
Как сделать идеальный круг в CSS?
Для создания идеального круга HTML-элемент должен быть квадратным (с одинаковой шириной и высотой), а значение border-radius должно быть равно 50%. В этом инструменте можно использовать пресет «Circle», чтобы сразу сгенерировать нужный код.
Как сделать форму таблетки (капсулы)?
Форма таблетки создается путем задания очень большого значения border-radius в пикселях, например 9999px. Это гарантирует, что левый и правый (или верхний и нижний) края станут идеальными полукругами независимо от ширины элемента.
Почему в сгенерированном CSS-коде иногда меньше четырех значений?
В CSS применяется краткая запись для border-radius. Если все четыре угла одинаковые, указывается одно значение (например, 16px). Если совпадают верхний левый с нижним правым, а верхний правый с нижним левым — указывается два значения. Это делает CSS-код чистым и компактным.
Сохраняются ли где-нибудь данные моего дизайна?
Нет, этот генератор border-radius работает исключительно в вашем браузере. Данные не отправляются и не хранятся на серверах, обеспечивая быструю и конфиденциальную работу.

Похожие инструменты

Генератор теней CSSНастраивайте мягкие, резкие, многослойные или внутренние тени с предпросмотром в реальном времени и копируйте CSS-код.Генератор CSS-градиентовСоздайте градиентный фон в визуальном редакторе и скопируйте CSS — линейный, радиальный или конический.Генератор цветовых палитрВыберите один цвет и получите гармоничную палитру из пяти цветов на основе теории цвета.Симулятор дальтонизмаВзгляните на свои изображения глазами человека с нарушениями цветовосприятия, чтобы убедиться в доступности вашего дизайна.Проверка контрастности цветовУзнайте, достаточно ли читабелен ваш текст, и подберите ближайший цвет, соответствующий стандартам WCAG.Конвертер цветовКонвертируйте любой цвет между HEX, RGB, HSL, HSV и CMYK, а также проверяйте его контрастность.