CSS border-radius. Як це працює?

Цей коротенький візуальний огляд буде корисним для початківців.

Практично кожна кнопка, яку ви бачите в інтерфейсах, має закруглені кути. Округлюються вікна і картки, іконки та логотипи. Ми вже давно звикли до круглих аватарок і бейджів.

Photo by Adem AY on Unsplash

Ми знаємо як це працює, як виглядає результат, але як відбувається обчислення, відносно чого розраховується радіус і як вирівнюються дві сусідні грані?

Щоб відповісти на ці питання, розглянемо 6 різних прикладів border-radius:

• простий радіус 100px для рамки товщиною 100px;
• великий радіус 150px для рамки товщиною 100px;
• пара радіусів 100px / 50px;
• радіус у відсотках;
• радіус для рамок різної товщини та стилю;
• радіус, який більше розмірів контенту;

Для простоти всі приклади округлюють лише верхній лівий кут. Я буду використовувати дві ідентичні фігури, і єдина різниця полягає у відображенні радіусів поверх другої фігури.

Простий радіус

Маємо блок розміром 100px/100px з рамками товщиною 100px, задамо border-radius не більший за товщину рамок, нехай це також буде 100px. Як це працює: кут рамки окреслює коло, радіус якого дорівнює значенню border-radius. Давайте подивимося на візуалізацію:

Розміри 100px/100px, товщина рамки 100px, округлення 100px

Все максимально просто. Межі нашої фігури обтікають просте коло.

Зверніть увагу на те, що зовнішній край нашої рамки закруглений, а внутрішній край, що межує з контентом, — ні. У цьому прикладі він не змінюється після заокруглення. Про те, як закруглити внутрішній край, піде мова нижче.

Великий радіус

Я ніколи раніше не звертала увагу на те, що border-radius по-різному впливає на зовнішній та внутрішній краї рамки. Насправді поведінка цілком логічна:

Радіус внутрішнього краю (padding edge) дорівнює радіусу зовнішнього краю мінус товщина відповідної рамки. У випадку, коли результат від’ємний, внутрішній радіус дорівнює нулю.

Знову ж таки, це більш зрозуміло на візуальному прикладі. Він ідентичний попередньому, єдина відмінність — border-radius: 150px.

Розміри 100px/100px, товщина рамки 100px, округлення 150px

Пара радіусів

Найцікавіше починається коли ми використовуємо еліпс, а не коло. Для цього нам потрібно вказати два радіуси — горизонтальний і вертикальний.

Наступний приклад ідентичний першому: 100px/100px з рамками 100px, але радіус 100px / 50px.

Розміри 100px/100px, товщина рамки 100px, округлення 100px/50px

Візуально це виглядає незвично, але працює так само, як і просте коло — еліпс визначає форму кута.

Якщо б у цьому прикладі радіуси були більшими за товщину рамки, то внутрішній край рамки також був би заокруглений. Це правило завжди працює однаково.

Радіус у відсотках

Цей приклад працює у відповідності до всіх попередніх правил, цікавий момент — відносно чого вираховуються відсотки.

Відсоток горизонтального радіуса вираховується відносно ширини блока з рамкою (width of the border box), тоді як відсоток вертикального радіуса вираховується відносно висоти блока з рамкою (height of the border box).

Розміри 100px/100px, товщина рамки 100px, округлення 30%

У цьому прикладі всі розміри є стандартними 100px/100px, рамки 100px. Ширина блока з рамкою в цьому випадку буде дорівнювати сумі ширини блоку, товщини лівої рамки та товщині правої рамки 100px + 100px + 100px = 300px. Такі самі розрахунки і для вертикального радіуса, але тут ми використовуємо висоту. У нашому прикладі результат буде ідентичним 300px. Далі все просто — вираховуємо 30% від 300px, що становить 90px для кожного радіуса.

Якби у нашому прикладі у фігури були відступи між контентом та рамкою (padding), ми б також додали їх до ширини та висоти блока з рамкою.

Якби у нашому прикладі ширина та висота відрізнялися, то border-radius: 30% був би еліпсом, а не колом.

Радіус для рамок різної товщини та стилю

Ми можемо отримати цікаві результати, якщо рамки відрізняються за стилем або товщиною, але концептуально ці приклади нічим не відрізняються від першого.

Розміри 100px/100px, товщина рамок 50px 100px 50px, округлення 100px

Радіус більше розмірів фігури

Існує також виняток із правил border-radius. Криві протилежних кутів не повинні накладатися одна на одну.

Візьмемо наш стандартний приклад 100px/100px з рамками 100px, але радіусом 350px, це більше ширини блока з рамкою, нагадаю: 100 + 100 + 100 = 300.

Розміри 100px/100px, товщина рамки 100px, округлення 350px

На прикладі видно що коло 350px не співпадає із заокругленням фігури. Тож який радіус використовується в цьому випадку?

Розміри 100px/100px, товщина рамки 100px, округлення 350px

У випадку, коли сума протилежних радіусів округлення більша розмірів блока з рамкою (у нашому випадку це тільки один радіус 350px), то заданий радіус ігнорується і використовується максимально можливий — рівний ширині блока з рамкою. У нашому прикладі це 300px.

Саме тому border-radius: 50% та border-radius: 100% візуально не відрізняються.

Ширина блока з рамкою: 100px + 100px + 100px = 300px;
Радіус 50%: 300px * 50% = 150px; два таких радіуса: 300px;
Радіус 100%: 300px * 100% = 300px; два таких радіуса: 600px;
Радіус 100% більше за ширину блока, а радіус 50% дорівнює цій ширині, тому в обох випадках кути округлюються по радіусу 300px.

Розміри 100px/100px, товщина рамки 100px, округлення 50% і 100%

Як і обіцяла, цей допис короткий і простий, але він наглядно описує всі основні правила створення заокруглених кутів. Сподіваюся він змотивує вас експериментувати з різноманітними формами в CSS.

Дякую за те, що дочитали!
Побачимось наступного разу! 🤹🏻‍♀️

This story in English:

CSS border-radius. How does it work?