Необычный border-radius

Восемь ползунков. Одна органичная форма. Живой CSS для вставки.

Что это за генератор fancy border-radius?

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

Как сделать органичную форму-блоб на чистом CSS?

Потяните восемь маркеров по периметру, чтобы независимо задать горизонтальные и вертикальные радиусы каждого угла. Предпросмотр морфирует на лету, а сгенерированное объявление border-radius появляется рядом, готовое для копирования в ваш CSS-файл.

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

Восемь живых маркеров
По два ползунка с каждой стороны сцены независимо управляют четырьмя горизонтальными и четырьмя вертикальными радиусами — тот же интерфейс, к которому обращаются дизайнеры для блоб-, листовидных и галечных форм.
Готовый к продакшену CSS
Вывод использует восьмизначное сокращение border-radius из W3C, поддерживаемое во всех современных браузерах, с кнопкой копирования в один клик и Tailwind-совместимым вариантом с произвольным значением.
Проценты или пиксели
Переключайтесь между процентами для адаптивных форм, масштабирующихся с контейнером, и пикселями для пиксельно точных компонентов.
Подобранные пресеты и случайность
Стартуйте с подобранными вручную пресетами — blob, лист, печенье, органик — или нажмите Случайно для свежего вдохновения с каждым кликом.

Как пользоваться

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

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

Как работает border-radius-синтаксис с восемью значениями?

Сокращение задаёт четыре горизонтальных радиуса (верх-лево, верх-право, низ-право, низ-лево) и четыре вертикальных радиуса в том же порядке, разделённых слешем — создавая эллиптическую кривую в каждом углу, что и делает возможными органичные блоб-формы.

Адаптивны ли сгенерированные формы?

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

Можно ли использовать это в продакшене?

Безусловно. Восьмизначный синтаксис border-radius — часть CSS Backgrounds and Borders Module Level 3 и поддерживается во всех evergreen-браузерах, включая iOS Safari и Android Chrome.

Создано командой Tooljar в соответствии со спецификацией W3C CSS Backgrounds and Borders Module Level 3, с восемью значениями радиусов, отрисовываемыми в реальном времени — то, что вы видите в предпросмотре, и есть ровно то, что браузер нарисует из сгенерированного объявления.