Генератор CSS border-radius
Визуально создавайте CSS border-radius с предпросмотром в реальном времени и копируйте готовый код.
border-radius: —;
100% конфиденциально — всё выполняется в вашем браузере. Ничего не загружается.
О Генератор CSS border-radius
Генератор CSS border-radius создаёт всё — от мягко скруглённых карточек до органичных фигур-«блобов». Перетаскивайте маркеры углов прямо на превью или задавайте каждый угол числом — включая полный синтаксис из восьми значений, где у каждого угла отдельные горизонтальный и вертикальный радиусы. Именно эта вторая ось открывает возможность создавать яйца, листья, капли и блобы.
Переключатель связи углов удерживает все четыре угла синхронизированными для классического равномерного скругления, а при отключении каждый угол можно менять независимо для асимметричных форм. Двенадцать пресетов — rounded, pill, circle, squircle, два блоба, leaf, egg, arch, teardrop, petal и wave — показывают возможности свойства, а кнопка случайной генерации бесконечно создаёт новые органичные формы.
Вы можете изменить единицу измерения, перекрасить элемент и холст под свой дизайн и скопировать либо само значение border-radius, либо полное CSS-правило. Инструмент полностью работает на стороне клиента — ничего не загружается на сервер.
Как использовать Генератор CSS border-radius
- Перетащите маркеры углов на превью или отключите «Связать все углы», чтобы редактировать каждый угол по отдельности.
- Задайте горизонтальный и вертикальный радиус для каждого угла, чтобы получить органичные формы-блобы.
- Выберите единицу измерения и настройте цвета элемента и фона для просмотра в контексте.
- Попробуйте пресеты — pill, squircle, blob, leaf, teardrop и другие — или нажмите случайную генерацию.
- Скопируйте значение border-radius или полный CSS.