Властивість border-radius
Заокруглення кутів елементів — одна з найпростіших задач, що виникають у веброзробників. Воно зустрічається ледь не на кожному сайті. І майже завжди для вирішення цієї задачі використовується CSS-властивість border-radius.
![](https://cdn.cases.media/image/wide/e01fff93-b36c-4739-b555-54a920d3b2c8.png)
border-radius — це коротка форма для чотирьох властивостей — border-top-left-radius, border-top-right-radius, border-bottom-right-radius та border-bottom-left-radius.
Вони дозволяють задавати заокруглення верхнього лівого, верхнього правого, нижнього правого і нижнього лівого кутів елемента відповідно.
Порядок, в якому перелічені ці властивості, не випадковий. Саме в такому порядку вони задаються в короткій формі — за годинниковою стрілкою, починаючи з верхнього лівого кута.
![](https://cdn.cases.media/image/wide/83bc1729-64b9-414b-a2ae-4fc55cc1dcde.png)
Коротка форма дозволяє вказувати менше ніж чотири значення. Якщо вказати лише три значення, то радіус заокруглення для нижнього лівого кута буде аналогічним радіусу заокруглення верхнього правого кута.
![](https://cdn.cases.media/image/wide/96628fa4-31f6-49f2-bd5b-1c80ca772726.png)
У випадку, якщо вказані два значення, перше задає радіус верхнього лівого і нижнього правого, а друге — радіус верхнього правого і нижнього лівого кутів.
![](https://cdn.cases.media/image/wide/f733ac74-2c14-4c13-a283-ff50490577ca.png)
Ну а якщо вказане лише одне значення, то воно буде застосовано як радіус заокруглення до всіх кутів елемента.
![](https://cdn.cases.media/image/wide/54759651-042b-4a0c-869d-890e9703ad62.png)
Еліптичне заокруглення
Властивість border-radius дозволяє вказувати до восьми значень. Але навіщо потрібно аж вісім значень, якщо кутів у елемента лише чотири? Справа в тому, що друга четвірка значень дозволяє робити еліптичне заокруглення. Найпростіше пояснити це на прикладі з одним кутом, хай це буде верхній правий кут:
![](https://cdn.cases.media/image/wide/b1bf8b4b-49f0-435b-874b-622cdc3d6693.png)
Якщо вказати два значення для властивості border-top-right-radius, то заокруглення буде повторювати контур еліпса. Звідси і походить назва такого заокруглення — еліптичне.
Перше значення відповідатиме відстані від центру еліпса до сторони елемента по-горизонталі — для верхнього правого кута це права сторона. Відповідно, друге значення відповідатиме відстані від центру еліпса до сторони елемента по-вертикалі — у випадку верхнього правого кута це верхня сторона елемента. На ілюстрації вище перше значення показано синім кольором, а друге — рожевим.
Зауважте, що в індивідуальних властивостях для кожного з кутів ці пари значень задаються через пробіл. Але в короткій формі пари задаються через косу риску: спочатку задаються від одного до чотирьох значень по-горизонталі, а через косу риску — від одного до чотирьох значень по-вертикалі.
![](https://cdn.cases.media/image/wide/55cb9288-486b-48ef-9e5b-3eac8a9a5c0e.png)
Порядок значень для обох четвірок аналогічний — починається з верхнього лівого кута і слідує за годинниковою стрілкою. До речі, кількість значень по обидві сторони косої риски не обов’язково має співпадати. Наприклад, можна задати лише одне значення перед рискою, і чотири — після:
![](https://cdn.cases.media/image/wide/8b09aebe-5b41-419d-95a3-19c660bc1abd.png)
Відсоткові значення
Серед одиниць вимірювання, які можна використовувати в якості значення властивості, є відсотки. У випадку їх застосування, вихідною величиною будуть розміри самого елемента, до якого застосовується властивість: для значень перед косою рискою це буде ширина, а для значень після косої риски — висота.
Таким чином, якщо ви задасте елементу властивість border-radius зі значенням 50%, то він сам перетвориться на еліпс:
![](https://cdn.cases.media/image/wide/b5ab0683-dc6d-4bfa-9de3-c9c6b874ea19.png)
Використання відсотків у значеннях властивості border-radius дозволяє заокруглювати елементи в певній пропорції до розмірів самих елементів.
* * *
І наостанок, розкажу вам про маленьку хитрість із властивістю border-radius. Інколи буває необхідно створити елемент, що виглядає приблизно ось так:
![](https://cdn.cases.media/image/wide/b3cdc727-1358-4399-a03f-46e94ddbebfe.png)
Як бачите, в цього елемента кути заокруглені таким чином, що складається враження, ніби заокругленими є ліва та права сторони.
Для створення такого ефекту потрібно задати радіус заокруглення, що відповідатиме 50% від меншої зі сторін прямокутника — в даному випадку це половина висоти.
Але якщо вказати, власне, 50%, то отримаємо еліпс. Звичайно, можна вирахувати і задати радіус заокруглення в пікселях, але в такому разі доведеться змінювати значення властивості щоразу як змінюватиметься висота елемента, інакше елемент не виглядатиме належним чином.
Для того, щоби добитися потрібного ефекту і не перейматися зміною розмірів елемента, достатньо задати властивості border-radius дуже велике значення у пікселях, наприклад 9000px. Цей трюк працює як у короткій формі, так і у окремих властивостях для різних кутів.