Генератор радиуса границы
Создавайте значения радиуса границы CSS визуально с помощью нашего бесплатного генератора радиуса границы. Перетаскивайте 8 независимых угловых маркеров, чтобы создавать круги, таблетки, капли и собственные закругленные формы — мгновенно получайте готовые к копированию сокращенные и полные CSS-коды. Вся обработка выполняется локально в вашем браузере. Регистрация не требуется.
Drag the 8 sliders to set independent horizontal and vertical radii for each corner. Use presets for common shapes or link all corners to edit them together. The CSS output updates in real time - copy the shorthand or longhand CSS with one click.
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
border-top-left-radius: 30% 30%; border-top-right-radius: 70% 30%; border-bottom-right-radius: 30% 70%; border-bottom-left-radius: 70% 70%;
.element {
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
}--radius-tl: 30% 30%; --radius-tr: 70% 30%; --radius-br: 30% 70%; --radius-bl: 70% 70%;
Зачем использовать наш генератор радиусов границ?
- Мгновенная генерация радиуса границы CSS: визуально генерируйте значения радиуса границы CSS и получайте готовый к копированию вывод CSS в реальном времени. Наш генератор радиусов границ обновляет предварительный просмотр и CSS при каждом перемещении ползунка — нажатие кнопки не требуется, регистрация не требуется.
- Онлайн-генератор безопасного радиуса границ: вся генерация CSS происходит локально в вашем браузере с использованием JavaScript. Конфигурации вашего дизайна никогда не покидают ваше устройство, обеспечивая 100% конфиденциальность при использовании нашего онлайн-генератора радиусов границ.
- Генератор радиуса границы онлайн — без установки: используйте наш генератор радиуса границы прямо в браузере без каких-либо загрузок, плагинов или Node.js. Генерируйте значения радиуса границы CSS с любого устройства в любое время.
- 8-точечное управление и 10 предустановок формы: установите независимые горизонтальные и вертикальные радиусы для всех 4 углов (всего 8 значений), чтобы создавать круги, таблетки, капли, листья и органические формы. Выбирайте один из 10 встроенных пресетов или связывайте все углы, чтобы редактировать их вместе. Выводит сокращенные, длинные записи и форматы переменных CSS.
Распространенные случаи использования генератора радиуса границы
- Дизайн компонентов пользовательского интерфейса: разработчики внешнего интерфейса используют наш генератор радиусов границ для создания закругленных углов для кнопок, карточек, модальных окон и полей ввода. Перетащите маркеры, чтобы найти идеальный радиус, и скопируйте CSS прямо в таблицу стилей.
- Токены системы проектирования. Инженеры системы проектирования используют наш генератор радиусов границ для определения согласованных токенов радиуса границ. Вывод переменной CSS напрямую сопоставляется с файлами токенов проектирования для токенов Tailwind, Figma и словаря стилей.
- Создание BLOB-объектов и органических форм: дизайнеры используют наш генератор радиусов границ для создания органических BLOB-форм для главных разделов, аватаров и декоративных элементов. 8-точечный интерфейс позволяет создавать полностью асимметричные формы, которые невозможно рассчитать вручную.
- Рамки значков приложений и аватаров. Разработчики мобильных устройств используют наш генератор радиусов границ для создания прямоугольной формы, используемой для значков приложений iOS и адаптивных значков Android. Пресет Squircle (30%) мгновенно создает правильную округлую квадратную форму.
- Визуальные элементы целевой страницы. Маркетологи используют наш генератор радиусов границ для создания призывов к действию в форме таблеток, закругленных рамок изображений и декоративных форм для целевых страниц. Пресеты Pill и Blob особенно популярны для современных целевых страниц SaaS.
- Изучение радиуса границы CSS. Разработчики, изучающие CSS, используют наш генератор радиуса границы, чтобы понять, как работает синтаксис радиуса границы с 8 значениями. Предварительный просмотр в реальном времени сразу дает понять, как каждое значение горизонтального и вертикального радиуса влияет на форму.
Понимание CSS border-radius
- Как работает наш генератор радиусов границ: щелкните любую из 10 предустановок формы (острая, закругленная, карточка, круг, таблетка, сквиркл, капля, лист, яйцо, ромб), чтобы мгновенно применить начальную форму. Или начните с асимметричной формы по умолчанию и отрегулируйте ползунки вручную.
- Перетащите 8 угловых маркеров: в каждом углу есть два ползунка — горизонтальный (X) и вертикальный (Y) радиус. Перетащите ползунки или введите значения напрямую. Переключите «Связать все углы», чтобы редактировать все 8 значений одновременно. Переключайтесь между единицами измерения пикселей и % в любое время.
- Скопируйте сгенерированный CSS. Генератор радиуса границы выводит четыре формата CSS в реальном времени: сокращенный (радиус границы), длинный (отдельные свойства угла), полное правило CSS с селектором и объявления переменных CSS. Нажмите любую кнопку «Копировать», чтобы скопировать нужный вам формат.
- Форматы вывода CSS border-radius: если все углы равны, выводится border-radius: 16 пикселей. Если углы различаются, но X=Y, выводится форма с 4 значениями. Если X≠Y, выводится полная форма из 8 значений с косой чертой.
Часто задаваемые вопросы
Генератор радиуса границы — это визуальный инструмент, который позволяет вам устанавливать значения радиуса границы CSS, перетаскивая маркеры на фигуре предварительного просмотра, и выводит готовый к копированию CSS. Наш генератор радиусов границ поддерживает все 8 отдельных угловых значений (верхний левый-x, верхний левый-y и т. д.) для полностью асимметричных фигур — регистрация не требуется.
Генератор радиуса границы выводит сокращение радиуса границы, когда все углы равны, или полный синтаксис из 8 значений (радиус верхней границы слева, радиус верхней границы справа, радиус нижней границы справа, радиус нижней границы слева), когда углы различаются. Он также выводит объявления переменных CSS для рабочих процессов токена проектирования.
Синтаксис с четырьмя значениями (например, 20px 40px 20px 40px) устанавливает одинаковый горизонтальный и вертикальный радиус для каждого угла. Синтаксис с 8 значениями (например, 20 пикселей 40 пикселей 20 пикселей 40 пикселей / 10 пикселей 20 пикселей 10 пикселей 20 пикселей) устанавливает независимые горизонтальные и вертикальные радиусы для каждого угла, обеспечивая эллиптические и органические формы капель.
Да. Вся генерация CSS происходит локально в вашем браузере с использованием JavaScript. Никакие данные не отправляются ни на один сервер, что обеспечивает полную конфиденциальность вашей проектной работы.
Да! Наш генератор радиусов границ на 100% бесплатен, без регистрации, учетной записи и ограничений на использование. Создавайте значения радиуса границы CSS для любого проекта прямо в браузере.
Да. Установив различные горизонтальные и вертикальные радиусы для каждого угла с помощью 8-точечного интерфейса ручки, вы можете создавать органические формы капель, формы таблеток, формы листьев и другие асимметричные закругленные формы. Генератор радиуса границы выводит полный синтаксис CSS из 8 значений для этих фигур.
Генератор радиуса границы включает в себя наборы настроек для распространенных фигур: круг (50%), таблетка (9999 пикселей), закругленная (8 пикселей), карта (16 пикселей), белка (30%), капля (асимметричная органическая форма), лист (асимметричный) и острый (0 пикселей). Щелкните любой пресет, чтобы мгновенно применить его и просмотреть результат CSS.
Да. Генератор радиуса границы показывает сгенерированный CSS в блоке кода с помощью кнопки копирования одним щелчком мыши. Вы также можете скопировать отдельные значения свойств или полное правило CSS, включая селектор.
Да. Вы можете переключаться между единицами измерения px и % в генераторе радиуса границы. Процентные значения относятся к размерам элемента: 50% создает круг для квадратных элементов и эллипс для прямоугольных.