Генератор CSS border-radius
Создавайте краткую запись border-radius из значений отдельных углов с поддержкой эллиптических углов и эквивалентов Tailwind.
Генератор CSS border-radius
Установите радиус для каждого угла и этот инструмент создаст правильную CSS краткую запись border-radius, сжав её до минимального кода — одно значение, когда все четыре угла совпадают, два или три значения, когда противоположные углы повторяются, и полный список из четырёх значений, когда каждый угол уникален. Создан для дизайнеров и разработчиков, которые оформляют карточки, кнопки, аватары, модальные окна или поля ввода и хотят получить чистый, копируемый CSS без ручного расчёта углов.
Выберите «Одинаковый радиус на всех углах» для простого скруглённого прямоугольника или переключитесь на «Разные углы», чтобы настроить каждый угол независимо в пиксельных, процентных или rem единицах. Включение эллиптических углов добавляет восьмизначную нотацию со слэшем, которую поддерживает border-radius — отдельный горизонтальный и вертикальный радиус для каждого угла, управляемые одним слайдером соотношения, поэтому скругление или сплющенная форма требует одного движения, а не восьми вводов. Опция «Случайная органическая форма» генерирует новую асимметричную форму каждый раз — создавая мягкие, неправильные контуры, которые часто используют в героических секциях и декоративных элементах.
Переключайте выходные данные между краткой записью border-radius и четырьмя развёрнутыми свойствами border-*-radius, а также включите опцию Tailwind, чтобы получить соответствующий класс утилиты рядом с обычным CSS. Значения проверяются по мере ввода: отрицательные числа обнуляются и никогда не возникает состояние, которое создаёт неправильный CSS. Счётчик под результатом показывает количество созданных строк, количество уникальных значений углов и точное количество символов, обновляясь при изменении параметров.