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