Генератор Border Radius
Перетаскивайте угловые маркеры, чтобы ваять органические блобы с 8 независимыми радиусами — затем копируйте CSS или Tailwind код.
Как использовать генератор Border Radius
- Перетаскивайте любой из 4 угловых маркеров прямо на блоке предпросмотра, формируя его визуально.
- Точная настройка слайдерами: у каждого угла независимые горизонтальный и вертикальный радиусы.
- Попробуйте пресеты — блобы, лист, яйцо и формы билета в один клик.
- Подгоните цвета демо-блока и фона под ваш реальный дизайн для точного предпросмотра.
- Скопируйте объявление border-radius из вкладки CSS или возьмите класс Tailwind.
Об этом генераторе Border Radius
Большинство знает border-radius как одно значение — но свойство фактически принимает до 8 значений: четыре горизонтальных и четыре вертикальных радиуса, разделённых слэшем (например, border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). Этот синтаксис со слэшем — секрет органических «блоб»-форм, которые повсюду в современном веб-дизайне.
Этот генератор представляет все 8 значений в виде слайдеров и перетаскиваемых угловых маркеров, чтобы вы могли ваять именно ту форму, которую хотите, не заучивая синтаксис. Когда все углы имеют равные горизонтальные и вертикальные радиусы, вывод автоматически упрощается до стандартной записи из 1–4 значений. Сгенерированный код работает во всех современных браузерах, а вкладка Tailwind создаёт класс rounded-[...] с произвольным значением.
FAQ по Border Radius
Что такое синтаксис со слэшем (/) в border-radius?
В border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% значения до слэша — горизонтальные радиусы четырёх углов (верхний левый, верхний правый, нижний правый, нижний левый), а после слэша — их вертикальные радиусы. Разные горизонтальные и вертикальные радиусы создают эллиптические углы — основу органических блоб-форм.
Как сделать идеальный круг?
Установите все углы на 50% (или нажмите пресет «Круг»). На квадратном элементе border-radius: 50% даёт идеальный круг; на прямоугольном — эллипс. Проценты относительны к собственной ширине и высоте элемента.
Использовать проценты или пиксели для border-radius?
Проценты масштабируются вместе с элементом, делая формы адаптивными — идеально для блобов. Пиксели дают фиксированный размер угла, что лучше для UI-компонентов вроде кнопок и карточек, где нужно одинаковое скругление независимо от размера. Этот генератор использует проценты, чтобы формы сохраняли пропорции при любом размере.
Почему мой блоб выглядит сплюснутым на широком элементе?
Процентные радиусы относительны к размерам элемента — 50% по горизонтали на блоке шириной 400px это 200px, а 50% по вертикали на высоте 200px — 100px. Это ожидаемое поведение: форма адаптируется к блоку. Просматривайте с тем же соотношением сторон, что и у реального элемента.
Работает ли синтаксис на 8 значений во всех браузерах?
Да. Синтаксис со слэшем для эллиптических углов — часть спецификации CSS Backgrounds and Borders и поддерживается всеми современными браузерами (Chrome, Edge, Firefox, Safari) без префиксов.