ToolBox ProБлогEnglish

Генератор CSS Border Radius

Генерируйте CSS border-radius визуально с ползунками для каждого угла, пресетами фигур, переключателем единиц (px, %, rem) и готовым CSS-кодом. Бесплатный онлайн-генератор.

Всё работает в вашем браузере — данные не отправляются на сервер.

Зачем использовать генератор CSS Border Radius?

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

Ключевые возможности

  • Визуальный предпросмотр с настройкой border-radius для каждого угла
  • 4 ползунка для каждого угла + переключатель «Связать все углы»
  • 8 пресетов форм: Капсула, Круг, Скруглённый, Блоб, Лист, Морф, Вкладка, Карточка
  • Копирование CSS-вывода в сокращённой или развёрнутой форме
  • Переключатель единиц (px, %, rem) и кнопка случайной генерации

Как это работает

  1. Выберите пресет или настройте ползунки для каждого угла
  2. Включите «Связать все» для одновременной установки всех углов
  3. Переключайтесь между единицами px, % и rem для вашего проекта
  4. Скопируйте сгенерированный CSS-код в сокращённой или развёрнутой форме

Технические детали

Этот генератор выводит стандартный синтаксис CSS-свойства border-radius. Сокращённая форма следует порядку по часовой стрелке: верхний левый, верхний правый, нижний правый, нижний левый. Когда все углы равны, используется одно значение. Когда совпадают две диагональные пары, используются два значения. Инструмент поддерживает единицы px (пиксели), % (проценты от размеров элемента) и rem (root em). Вся обработка выполняется на стороне клиента.

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

В чём разница между сокращённой и развёрнутой формой CSS-свойств?

Сокращённая форма 'border-radius' объединяет все четыре угла в одну декларацию, следуя порядку по часовой стрелке (верхний левый, верхний правый, нижний правый, нижний левый). Индивидуальные свойства, такие как 'border-top-left-radius', позволяют настроить конкретные углы. Сокращённая форма более лаконична, а индивидуальные свойства дают больше контроля.

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

Процентные значения создают эллиптические углы относительно размеров элемента, делая их адаптивными. Пиксели дают фиксированный размер углов независимо от размера элемента. Используйте проценты для плавных форм, таких как круги (50%) и блобы, и пиксели для одинаковых углов на элементах разного размера.

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

Установите все углы в 50%, чтобы создать идеальный круг на квадратном элементе, или используйте пресет «Круг». Значение 50% делает радиус равным половине ширины/высоты элемента, образуя полный круг.

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

Выбор цвета и конвертер

Выбирайте цвета и конвертируйте между форматами HEX, RGB, HSL и HSV

Конвертер HEX в RGB

Конвертируйте HEX-коды цветов в значения RGB и RGBA

Конвертер RGB в HEX

Конвертируйте значения RGB в HEX-коды

Генератор цветовых палитр

Создавайте цветовые палитры из базового цвета — комплементарные, аналоговые, триадные и другие

Проверка контрастности WCAG

Проверяйте коэффициенты контрастности цветов на соответствие WCAG AA и AAA

Генератор хеш-цвета

Генерируйте согласованные, детерминированные цвета из любой текстовой строки

← На главную