CSS Border Radius Generator онлайн
Создавайте простой, поугловой или в форме блоба CSS border-radius с живым предпросмотром. Всё работает прямо в вашем браузере.
Генератор CSS Border Radius полностью работает в вашем браузере. Введённые значения и сгенерированный CSS никогда не покидают ваше устройство и не загружаются в ArrayKit.
Открыть Генератор Box Shadow
Об инструменте Генератор Border Radius
Генератор CSS Border Radius создаёт объявление border-radius, которое можно сразу вставить в таблицу стилей, вместе с живым предпросмотром, который обновляется по мере изменения значений. Переключайтесь между режимом Simple для одного радиуса на всех четырёх углах, режимом Per-corner для независимого скругления каждого угла и режимом Blob для восьмизначной эллиптической формы, которую дизайнеры используют, чтобы имитировать органическую, будто нарисованную от руки форму. Выбирайте px, % или rem, перетаскивайте значения или нажмите «Случайно» в режиме Blob, чтобы исследовать формы, которые вы бы не набрали вручную. Это полезно для кнопок, карточек, аватаров, декоративных блобов и любого компонента, где скруглённые углы должны выглядеть именно так, как нужно, прежде чем вы примените CSS. Создан для фронтенд-разработчиков и дизайнеров, которым нужна мгновенная визуальная обратная связь. Всё выполняется локально в вашем браузере — никакие стили или разметка никуда не отправляются.
Возможности
- Режим Simple скругляет все четыре угла одним значением и ползунком
- Режим Per-corner независимо задаёт верхний левый, верхний правый, нижний правый и нижний левый углы
- Режим Blob генерирует восьмизначный эллиптический border-radius для органических форм
- Кнопка «Случайно» в один клик в режиме Blob для быстрого исследования форм
- Переключение единиц px, % и rem для простого и поуглового радиуса
- Квадратный предпросмотр обновляется мгновенно при каждом изменении
- Готовое к копированию CSS-объявление в один клик
- Работает полностью в браузере, CSS никуда не загружается
Как использовать Генератор Border Radius
- Выберите режим Simple, Per-corner или Blob
- Настройте ползунок, числовые поля или проценты блоба
- Наблюдайте, как живой предпросмотр обновляется в реальном времени
- Скопируйте сгенерированное CSS-объявление border-radius
Пример
Ввод
all corners 12px
Результат
border-radius: 12px;
Четыре одинаковых угла сворачиваются в одно значение border-radius.
Частые ошибки и устранение неполадок
- Форма блоба выглядит как скруглённый прямоугольник, а не органическая форма. — Убедитесь, что горизонтальный и вертикальный проценты различаются для каждого угла — одинаковые значения H и V на всех углах дают лишь простую скруглённую форму.
- CSS с поугловыми значениями неожиданно снова сворачивается в одно значение. — Это ожидаемое поведение: когда все четыре угла совпадают, Генератор CSS Border Radius выводит более короткую однозначную сокращённую форму вместо повторения одного числа четыре раза.
- Процентный радиус выглядит по-разному на неквадратном элементе. — Процентный border-radius задаётся относительно собственной ширины и высоты элемента, поэтому одно и то же процентное значение выглядит по-разному на широком прямоугольнике и на квадрате — проверяйте на реальных пропорциях вашего элемента.
- Скруглённый угол исчезает на очень маленьком элементе. — border-radius ограничен половиной короткой стороны элемента, поэтому большой радиус в px на маленьком блоке просто отображается как таблетка или полный круг, а не выходит за границы.
Часто задаваемые вопросы
- Что именно создаёт режим Blob в Генераторе CSS Border Radius?
- Он создаёт восьмизначный эллиптический синтаксис border-radius — четыре горизонтальных процента, косая черта, затем четыре вертикальных процента, по паре на каждый угол — стандартный приём для органических, будто нарисованных от руки форм в CSS.
- Может ли Генератор CSS Border Radius выводить проценты или rem вместо пикселей?
- Да. Режимы Simple и Per-corner позволяют переключать единицу измерения между px, % и rem, и живой предпросмотр вместе со сгенерированным CSS сразу обновляются соответственно.
- Почему режим Per-corner иногда выводит одно значение вместо четырёх?
- Когда все четыре угла в итоге совпадают, инструмент автоматически сворачивает border-radius в более короткую однозначную форму — это корректный, эквивалентный CSS, который делает таблицу стилей чище.
- Загружает ли Генератор CSS Border Radius мой дизайн или CSS куда-либо?
- Нет. Все вычисления и живой предпросмотр выполняются локально в вашем браузере. Введённые значения и сгенерированный CSS никогда не покидают ваше устройство.
- Для чего нужна кнопка «Случайно» в режиме Blob?
- Она заполняет все восемь процентов блоба новыми случайными значениями в один клик, позволяя быстро просматривать варианты органических форм, не вводя каждый угол вручную.
- Поддерживается ли сгенерированный CSS border-radius во всех современных браузерах?
- Да. И стандартная сокращённая форма, и восьмизначный эллиптический синтаксис блоба являются частью спецификации CSS Backgrounds and Borders и работают во всех актуальных основных браузерах.
Связанные инструменты
Все инструменты ArrayKit