Как сгенерировать CSS border-radius для каждого угла?

Отключите Единый (все углы одинаковые) и настройте ползунки для каждого угла, глядя на предпросмотр. Выберите Единицу измерения, px или %, затем нажмите Копировать, чтобы получить объявление border-radius.

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

Включите Эллиптический (синтаксис X / Y), чтобы задать горизонтальный и вертикальный радиусы для каждого угла отдельно, или нажмите Случайный blob. В выводе используется синтаксис с косой чертой, например 32px 20px 20px 32px / 20px 32px 20px 32px.

Что использовать для скругления углов: px или проценты?

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

Можно ли скопировать результат как класс Tailwind?

Да. Переключите формат вывода на Tailwind, чтобы скопировать класс с произвольным значением вроде rounded-[...] вместо CSS-объявления.

Можно ли проверить скругление на блоке другого размера?

Да. Ползунки Ширины и Высоты изменяют размер предпросмотра от 64 до 320 px, так что вы можете проверить, как один и тот же радиус выглядит на узких, широких или высоких элементах.

Это правда бесплатно?

Да. Все инструменты бесплатны, без учётной записи и банковской карты. Работа выполняется на вашем устройстве, а не на наших серверах, что и позволяет оставаться бесплатными.

Работает на мобильных устройствах?

Да. Работает в современных мобильных браузерах на iOS и Android, ничего устанавливать не нужно.

◖

Генератор CSS border-radius — бесплатно

Визуально проектируйте скруглённые углы с независимым управлением каждым углом. Поддерживает синтаксис X/Y для эллипса и органичных форм.

Работает в браузереБез регистрации и всплывающих оконРегистрация не требуетсяБесплатно навсегда

Работает офлайн после загрузки

border-radius: 20px 20px 20px 20px;

Единый (все углы одинаковые)Эллиптический (синтаксис X / Y)

Единица измерения

Цвет:

Ширина (192px)

Высота (192px)

Все углы (20px)

Частые применения

Органические формы пятенИспользуйте эллиптический синтаксис X/Y для создания уникальных форм пятен для разделов hero и иллюстраций.
Углы карточек и контейнеровСтандартные скругленные углы для карточек, контейнеров и панелей в современном дизайне UI.
Формы аватара и фотографии профиляСоздайте правильный стиль углов для фотографий профиля: круглый, squircle или скругленный квадрат.
Таблетки, теги и значкиСоздавайте идеально скругленные кнопки-таблетки, теги и значки с предустановкой 9999.
Асимметричные угловые дизайныСмешивайте радиусы между углами, чтобы создать отличительные, узнаваемые по бренду формы карточек и кнопок.

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

Генератор border-radius полностью работает в браузере — нет сервера, библиотеки и загрузки. Он строит строку значения CSS border-radius прямо в JavaScript, используя состояние React и useMemo, затем применяет её как встроенный стиль на живом элементе div, так что собственный движок CSS браузера рендерит форму в реальном времени.

1
Ползунки записывают состояние
Каждый ввод типа range записывает в одну из восьми числовых переменных состояния — четыре горизонтальных радиуса углов и четыре вертикальных для эллиптического режима. Унифицированный режим сворачивает все восемь в один ползунок через вспомогательную функцию setAll, которая синхронизирует все значения одновременно.
2
useMemo собирает значение CSS
Хук useMemo пересчитывает строку border-radius всякий раз, когда меняется любое значение угла, единица измерения (px или %) или эллиптический переключатель. В стандартном режиме он производит сокращённую форму из четырёх значений; при включённом эллиптическом режиме он добавляет разделитель-слэш для полного синтаксиса из восьми значений — например, 32px 20px 20px 32px / 20px 32px 20px 32px.
3
Движок CSS браузера рендерит предпросмотр
Вычисленная строка устанавливается как встроенный стиль borderRadius на обычном элементе div. Движок компоновки браузера выполняет весь рендеринг — нет холста, SVG, или стороннего кода рисования.
4
API Clipboard копирует вывод
Нажатие Копировать вызывает navigator.clipboard.writeText либо с декларацией CSS (border-radius: ...;), либо эквивалентным классом Tailwind с произвольным значением (rounded-[...]), в зависимости от выбранного переключателя формата.

Генератор CSS border-radius — бесплатно

Частые применения

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

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

Генератор CSS box-shadow

Генератор CSS Grid

Генератор CSS Flexbox

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