CodeKitHubЩо це за інструмент?
border-radius — це властивість CSS, що заокруглює кути елемента. Написана вручну, вона приймає чотири значення у фіксованому порядку — верхній лівий, верхній правий, нижній правий, нижній лівий — що легко переплутати, особливо коли чотири кути відрізняються.
Цей інструмент усуває здогадки: посуньте повзунок, спостерігайте, як кут заокруглюється в живому попередньому перегляді, і зчитайте точний CSS з блоку згенерованого коду. Один перемикач блокування переключає між однаковим радіусом (усі чотири кути однакові, найпоширеніший випадок) і чотирма незалежними повзунками для органічних, асиметричних форм.
Навіщо його використовувати?
- Живий попередній перегляд оновлюється миттєво під час перетягування — не потрібно редагувати CSS і оновлювати сторінку, щоб побачити результат.
- Блокування одним кліком для поширеного випадку "однаковий радіус на кожному куті"; розблокуйте для кнопок-пігулок, спливаючих бульбашок і форм-плям.
- Виводить скорочену форму з одним значенням, коли всі кути збігаються, або повну форму з чотирма значеннями, коли ні — готово до копіювання в будь-якому разі.
- Повністю виконується у вашому браузері. Нічого з введеного нікуди не надсилається.
- Безкоштовно, без реєстрації, працює на мобільних.
Як користуватися
- Залиште "заблокувати всі кути" позначеним і перетягніть будь-який повзунок, щоб встановити один однаковий радіус для всього вікна.
- Зніміть блокування, щоб керувати кожним кутом незалежно — корисно для форм-пігулок, форм-краплин та асиметричних карток.
- Спостерігайте, як вікно попереднього перегляду оновлюється в реальному часі під час налаштування кожного повзунка.
- Скопіюйте згенерований CSS з блоку коду й вставте його у свою таблицю стилів.
Приклад
Введення
Верхній лівий: 40px, верхній правий: 8px, нижній правий: 40px, нижній лівий: 8pxРезультат
border-radius: 40px 8px 40px 8px;Невідповідні протилежні кути, як тут, створюють силует листка чи пелюстки — поширений ефект у дизайні карток і бейджів.
px чи % — яку одиницю використовувати?
Цей генератор виводить значення в пікселях, що є правильним варіантом за замовчуванням для більшості роботи з UI: кнопок, карток і полів введення, де потрібен фіксований, передбачуваний радіус кута незалежно від розміру елемента.
Відсотки поводяться інакше — вони відносні до власної ширини й висоти елемента, тож радіус 50% на квадратному елементі створює ідеальне коло, а на неквадратному елементі — еліпс. Якщо потрібен саме такий ефект (аватарки, форми-плями, що масштабуються разом із контейнером), візьміть згенерований CSS і замініть значення px на % вручну — наприклад, border-radius: 50% перетворює будь-яке квадратне вікно на коло.
Поширені шаблони border-radius
- Заокруглена картка: всі кути однакові, приблизно 8–16px для компонентів UI.
- Кнопка-пігулка: встановіть радіус на половину висоти елемента (або просто використайте 9999px, який фіксується на повній формі пігулки незалежно від висоти).
- Аватарка-коло: border-radius: 50% на квадратному (однакова ширина й висота) елементі.
- Спливаюча бульбашка: три кути заокруглені, один кут гострий — встановіть три повзунки високими, а один на 0.
- Форма листка/пелюстки: протилежні кути збігаються, сусідні кути відрізняються — наприклад, верхній лівий і нижній правий обидва великі, верхній правий і нижній лівий обидва маленькі.
Поєднання з тінню
Заокруглені кути рідко з'являються самі по собі — картки й кнопки зазвичай також потребують трохи тіні для об'єму. Використайте Генератор box-shadow, щоб налаштувати тінь, і застосуйте обидва фрагменти згенерованого CSS до одного й того самого елемента.
Часті запитання
У чому різниця між border-radius і порядком кутів?
Скорочений запис CSS завжди йде в порядку верхній лівий, верхній правий, нижній правий, нижній лівий, за годинниковою стрілкою починаючи з верхнього лівого. Чотири повзунки цього інструменту підписані відповідно, тож вам ніколи не доведеться самостійно запам'ятовувати порядок.
Чи можна використати різні одиниці для кожного кута?
Так, у реальному CSS можна змішувати px, %, em і rem між кутами, хоча на практиці це трапляється рідко. Цей інструмент для простоти генерує однакові значення px — замініть будь-яке окреме значення на % чи іншу одиницю напряму у своїй таблиці стилів, якщо потрібні змішані одиниці.
Чому border-radius: 50% іноді створює овал замість кола?
Тому що відсотки відносні до кожної осі окремо — горизонтальний радіус це відсоток від ширини елемента, вертикальний радіус — відсоток від його висоти. На квадратному елементі (однакова ширина й висота) це створює ідеальне коло; на прямокутнику — еліпс.
Чи впливає border-radius на фонові зображення й межі теж?
Так — border-radius обрізає фон елемента, межу і (в сучасних браузерах) його box-shadow до заокругленої форми. Він не обрізає дочірній вміст, що виходить за межі, якщо ви також не встановите overflow: hidden на батьківському елементі.
Чи є обмеження на те, наскільки великим може бути радіус?
Жорсткого обмеження немає — якщо радіус перевищує половину ширини чи висоти елемента, браузери фіксують його так, щоб дві криві з цього боку зустрічалися точно посередині, саме так квадрат стає ідеальним колом чи формою пігулки.
Як зробити форму пігулки чи ідеальне коло?
Для форми пігулки (капсули) встановіть радіус принаймні на половину висоти елемента — поширений прийом: border-radius: 9999px, що працює за будь-якої висоти, оскільки браузер автоматично обмежує криву. Для ідеального кола потрібно дві речі: однакові ширина й висота, плюс border-radius: 50%.