Генератор 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. Інструмент на 100% працює на стороні клієнта: жодні дані не завантажуються на сервер.
Як використовувати Генератор CSS border-radius
- Перетягуйте маркери кутів у попередньому перегляді або вимкніть «Зв’язати всі кути», щоб редагувати кожен кут окремо.
- Задайте горизонтальний і вертикальний радіус для кожного кута, щоб отримати органічні форми на кшталт блобів.
- Виберіть одиницю виміру та налаштуйте кольори елемента й фону, щоб побачити результат у контексті.
- Спробуйте пресети (pill, squircle, blob, leaf, teardrop та інші) або натисніть кнопку випадкової генерації.
- Скопіюйте значення border-radius або повний CSS.