Генератор CSS border-radius: заокруглені кути та органічні форми

Синтаксис border-radius

Базовий синтаксис: border-radius: 8px — однаковий радіус для всіх кутів. Можна задавати кожен кут окремо: border-radius: 8px 16px 4px 24px (за годинниковою стрілкою: верхній лівий, верхній правий, нижній правий, нижній лівий). Значення у % від розміру елемента: border-radius: 50% — ідеальне коло.

Еліптичний border-radius

Менш відомий синтаксис зі слешем: border-radius: 40px / 20px — горизонтальний радіус 40px, вертикальний 20px. Це дає еліптичний заокруглення. Повний синтаксис: border-radius: 40% 60% 60% 40% / 60% 30% 70% 40% — довільна органічна форма, не blob, але схожа.

Органічні форми через border-radius

Комбінуючи різні значення для горизонтального і вертикального радіусів кожного кута, можна отримати дуже органічні форми без SVG. Такий підхід простіший і більш підтримуваний, ніж clip-path: path(). Наш генератор дозволяє перетягувати точки для візуального налаштування.

border-radius у системах дизайну

Визначте кілька фіксованих значень радіусів для своєї системи: xs (2px), sm (4px), md (8px), lg (16px), xl (24px), full (9999px). Tailwind CSS робить саме це. Консистентне використання одних і тих самих значень надає UI відчуття цілісності та системного підходу.