Перейти до основного вмісту
LibraTool logoLibraTool

Генератор CSS border-radius — безкоштовно

Візуально проектуйте заокруглені кути з незалежним керуванням кожним кутом. Підтримує еліптичний синтаксис X/Y для органічних форм-краплин.

Працює офлайн після завантаження
border-radius: 20px 20px 20px 20px;
Одиниця

Типові застосування

  • Органічні Форми BlobВикористовуйте еліптичний синтаксис X/Y для створення унікальних форм blob для розділів hero та ілюстрацій.
  • Кути Карток та КонтейнерівСтандартні закруглені кути для карток, контейнерів і панелей у сучасному дизайні інтерфейсу.
  • Форми Аватара та Фотографії ПрофілюСтворіть правильний стиль кута для фотографій профілю: круглий, squircle або округлений квадрат.
  • Таблетки, Теги та ЗначкиБудуйте ідеально округлені кнопки-таблетки, теги та значки з готуванням 9999.
  • Асиметричні Проекти КутівЗмішуйте радіуси по кутах, щоб створити чіткі, впізнавані формами карток та кнопок.

Як це працює

Генератор border-radius працює повністю в браузері — без сервера, бібліотек і завантажень. Він формує рядок значення CSS border-radius прямо в JavaScript за допомогою стану React і useMemo, а потім застосовує його як вбудований стиль до живого елемента div, тож форму в реальному часі рендерить власний CSS-рушій браузера.

  1. 1
    Повзунки записують стан
    Кожен повзунок записує одну з восьми числових змінних стану — чотири горизонтальні радіуси кутів і чотири вертикальні для еліптичного режиму. Єдиний режим зводить усі вісім до одного повзунка через допоміжну функцію setAll, що синхронізує всі значення одночасно.
  2. 2
    useMemo збирає значення CSS
    Хук useMemo переобчислює рядок border-radius щоразу, коли змінюється значення будь-якого кута, одиниця (px чи %) або перемикач еліптичного режиму. У стандартному режимі він створює скорочений запис із чотирьох значень; з еліптичним — додає роздільник-скісну риску для повного синтаксису з восьми значень, наприклад 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS-рушій браузера рендерить перегляд
    Обчислений рядок задається як вбудований стиль borderRadius звичайного елемента div. Увесь рендеринг виконує рушій компонування браузера — без canvas, SVG чи стороннього коду малювання.
  4. 4
    Clipboard API копіює результат
    Натискання «Копіювати» викликає navigator.clipboard.writeText з оголошенням CSS (border-radius: ...;) або еквівалентним класом Tailwind з довільним значенням (rounded-[...]) залежно від вибраного формату.

Схожі інструменти

🎨

Генератор CSS box-shadow

Візуальний будівельник CSS box-shadow із живим попереднім переглядом, багатошаровим накладанням, палітрою кольорів, перемикачем inset і копіюванням одним кліком. Включає налаштування Material, neumorphism та glow.

Спробувати
🟦

Генератор CSS Grid

Візуально розробіть CSS grid — доріжки, одиниці та проміжки — та скопіюйте згенеровані CSS і HTML.

Спробувати
↔️

Генератор CSS Flexbox

Експериментуйте з напрямком flex, перенесенням, justify та align на живих елементах — і скопіюйте CSS.

Спробувати

Часті запитання