Генератор Border Radius
Створюйте стандартні та еліптичні значення CSS border-radius із живим попереднім переглядом і готовим CSS-кодом для копіювання — просто у браузері.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяФормуйте кути з більшим контролем
Радіус заокруглення — один із найшвидших способів змінити характер інтерфейсу. Малі значення виглядають точними й структурованими, середні роблять картки та кнопки привітнішими, а великі дають змогу створювати «пігулки», органічні форми чи грайливі ілюстративні панелі. Цей генератор border radius надає повний синтаксис CSS, тож ви можете проєктувати як звичайні заокруглені прямокутники, так і еліптичні кути, не записуючи вручну нотацію з похилою рискою.
Кожен кут має горизонтальний і вертикальний радіус. Коли значення однакові, кут круговий, а CSS нагадує знайому декларацію border-radius із чотирма значеннями. Коли X і Y відрізняються, кут стає еліптичним, і CSS спочатку записує горизонтальні значення, потім похилу риску, а тоді вертикальні. Живий попередній перегляд робить цей зв'язок наочним, адже форма змінюється миттєво під час руху кожного повзунка.
Коли еліптичні радіуси корисні
Еліптичні кути стають у пригоді, коли хочеться чогось органічнішого за просту картку, але потрібен легкий і адаптивний CSS. Вони можуть зробити аватари, акцентні блоки, форми купонів, маски зображень і декоративні панелі менш шаблонними. Асиметричні кути також допомагають створити візуальний напрям, привертаючи увагу до заголовка чи заклику до дії. Використайте пресет blob як відправну точку, а потім зменште найсильніші значення, якщо форма починає відволікати від вмісту.
Послідовне використання значень радіуса
У продакшн-дизайн-системах варто тримати невеликий набір стандартних радіусів для повсякденних компонентів, а власні значення застосовувати лише там, де форма має чітку мету. Кнопка, поле введення та картка зазвичай виглядають цілісніше, коли мають споріднені розміри кутів. Декоративні секції можуть бути виразнішими, але вони все одно мають добре виглядати за різної ширини. Після копіювання згенерованого CSS перевірте його на реальному розмірі елемента: радіус, що виглядає збалансовано на картці попереднього перегляду, може бути надто різким на компактному бейджі або надто слабким на широкій hero-панелі.
Як користуватися
- Задайте радіуси кутівНалаштуйте горизонтальні та вертикальні значення для лівого верхнього, правого верхнього, правого нижнього та лівого нижнього кутів.
- Перегляньте формуСпостерігайте, як картка оновлюється після кожної зміни кута.
- Скопіюйте CSSВикористайте декларацію border-radius у стилях свого компонента.