Генератор CSS border-radius

Что такое Генератор CSS border-radius?

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

Как пользоваться Генератор CSS border-radius

1. Выберите пресет (Скруглённый, Пилюля, Круг или Blob) в сегментированном переключателе, чтобы загрузить начальную форму.
2. Перетащите ползунок диапазона каждого угла или введите число, чтобы задать горизонтальный радиус этого угла.
3. Включите Эллиптический, чтобы открыть второй вертикальный радиус для каждого угла и получить овальные углы с синтаксисом со слешем.
4. Выберите единицу (px или %) в настройках; проценты масштабируют радиус вместе с размером блока.
5. Наблюдайте за обновлением живого предпросмотра, затем скопируйте сформированный сокращённый border-radius в свою таблицу стилей.

Примеры

Все четыре угла 16, эллиптический выключен

border-radius: 16px;

Пресет Пилюля, все углы 9999

border-radius: 9999px;

ВЛ 40/20, ВП 10, НП 40/20, НЛ 10, эллиптический включён

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

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

В каком порядке идут четыре угла?

Сокращённая запись перечисляет углы по часовой стрелке, начиная с верхнего левого: верхний левый, верхний правый, нижний правый, нижний левый. Этот инструмент всегда выводит все четыре значения в этом порядке, поэтому результат однозначен и его легко поправить вручную после.

Что делает эллиптический режим?

Border-radius может принимать горизонтальный и вертикальный радиус для каждого угла, разделённые слешем, чтобы рисовать овальные (эллиптические) углы вместо круглых. Включите Эллиптический, чтобы задать второй вертикальный радиус для каждого угла; вывод тогда использует синтаксис со слешем 'горизонтальный / вертикальный'.

Что использовать — px или проценты?

Пиксели дают фиксированный размер угла независимо от блока. Проценты задаются относительно ширины и высоты блока, поэтому 50% на каждом углу превращают квадрат в идеальный круг, а скругление масштабируется при изменении размера элемента. Единицу можно сменить в настройках.

Как сделать идеальный круг или пилюлю?

Выберите пресет Круг (50% на каждом углу), чтобы получить круг из квадрата, или пресет Пилюля (очень большой радиус в пикселях), чтобы короткие стороны стали полными полукругами. Можно также начать с пресета и точно настроить отдельные углы.

Загружаются ли мои данные куда-либо?

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