Генератор 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.