У цій статті
Розуміння border-radius
Властивість CSS border-radius заокруглює кути зовнішнього краю межі елемента. Вона приймає від одного до чотирьох значень для незалежного керування кожним кутом — верхній лівий, верхній правий, нижній правий і нижній лівий. Одне значення застосовує однаковий радіус до всіх чотирьох кутів, а чотири значення дозволяють створювати асиметричні форми.
Border-radius працює з будь-яким елементом, що має видимі межі, фони або тіні. Властивість обрізає як фон, так і межу за заокругленою формою, і правильно взаємодіє з box-shadow, outline та overflow.
Створення фігур з border-radius
Змінюючи значення радіусу, можна створити широкий спектр геометричних фігур повністю на CSS. Генератор дозволяє візуально налаштовувати кожен кут і одразу бачити результат.
- Форма пігулки — встановіть border-radius на 9999px для створення повністю заокруглених кінців як у кнопки-капсули. Це найпоширеніший UI-патерн для тегів, бейджів та кнопок-пігулок
- Коло — застосуйте border-radius: 50% до квадратного елемента (однакова ширина та висота). Відсоток обчислюється відносно кожного виміру, створюючи ідеальне коло
- Форми листка та плями — встановіть два протилежні кути на високі значення, а інші два на нуль (напр. border-radius: 60% 0 60% 0) для створення органічних форм
Спробуйте безкоштовно — реєстрація не потрібна
Згенерувати CSS Border Radius →Розширені еліптичні кути
Скорочений запис border-radius підтримує синтаксис зі слешем (/), який дозволяє визначати окремі горизонтальні та вертикальні радіуси для кожного кута. Це створює еліптичні криві замість кругових.
- Синтаксис зі слешем — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% означає, що горизонтальні радіуси всі 50%, але вертикальні відрізняються, створюючи яйцеподібну форму
- Властивості окремих кутів — border-top-left-radius: 50px 30px встановлює еліптичний кут з 50px горизонтального та 30px вертикального радіуса
- Поведінка відсотків — при використанні відсотків горизонтальний радіус відносний до ширини, а вертикальний — до висоти. Тому 50% / 50% на прямокутнику створює еліпс, а не коло
Часті запитання
Чи використовувати відсотки чи пікселі для border-radius?
Використовуйте відсотки, коли хочете, щоб радіус масштабувався з розміром елемента (кола, еліпси). Використовуйте пікселі для послідовного заокруглення кутів незалежно від розміру (кнопки, картки). Поширений патерн — 8px для UI-компонентів і 50% для аватарів.
Чи спричиняє border-radius проблеми субпіксельного рендерингу?
На дисплеях з високою роздільною здатністю малі значення border-radius (1-2px) можуть виглядати зубчастими. Використання трохи більшого радіуса (мінімум 3-4px) може покращити якість рендерингу.
Як border-radius взаємодіє з межами та контурами?
Border-radius заокруглює зовнішній край межі. Якщо елемент має товсту межу, внутрішній радіус автоматично обчислюється як зовнішній-радіус мінус ширина-межі. Outline не повторює border-radius у більшості браузерів. Box-shadow повторює заокруглену форму.