Кордон-радіус - CSS-хитрощі

Ви можете надати будь-якому елементу «закруглені кути», застосувавши border-radiusнаскрізний CSS. Ви помітите лише, якщо йдеться про зміну кольору. Наприклад, якщо елемент має колір фону або межу, який відрізняється від елемента, який він закінчив. Прості приклади:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Це вже не є необхідним, але для максимально можливої підтримки браузера ви можете додати префікс до -webkit-і -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Зверніть увагу на порядок цих властивостей: префікси постачальників перераховані першими, а версія, що не має префіксу, із специфікацією - останньою. Це правильний спосіб зробити це. Радіус кордону є особливо хорошим прикладом того, чому ми робимо це саме так. У дещо складнішій версії використання border-radius(де ви передаєте два значення замість одного) старший -webkit-префікс постачальника робив би щось зовсім інше, ніж версія “специфікація”. Отже, якщо ми сліпо копіюємо / вставляємо однакові значення до всіх трьох властивостей, ми можемо побачити різні результати у переглядачі. Дізнайтеся більше про цей сценарій. Для найбільш узгодженого довгострокового періоду найкраще вказати останню “специфікаційну” версію.

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

Якщо елемент має фон зображення, він буде обрізаний у закругленому куті природним чином:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Іноді ви можете побачити background-color"витік" за межами кордону, коли border-radiusвін присутній. (подивитися). Щоб запобігти цьому, ви використовуєте фоновий кліп:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Лише з одним значенням border-radiusбуде однаково на всіх чотирьох кутах елемента. Але це не обов’язково. Ви можете вказати кожен кут окремо, якщо хочете:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Ви також можете вказати два або три значення. MDN це добре пояснює:

Якщо встановлено одне значення, цей радіус застосовується до всіх 4 кутів .
Якщо встановлено два значення, перше застосовується до top-leftта bottom-rightкут, друге застосовується до top-rightта bottom-leftкут.
Чотири значення застосовуються до top-left, top-right, bottom-right, bottom-leftкут в такому порядку.
Три значення: друге значення стосується top-rightі також bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Ви також можете вказати радіуси, в яких кут округляється на. Іншими словами, округлення не повинно бути ідеально круглим, воно може бути еліптичним. Це робиться за допомогою скісної риски (“/”) між двома значеннями.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Примітка: Firefox підтримує еліптичні межі лише у версіях 3.5+ та старіших веб-переглядачах WebKit (наприклад, Safari 4), неправильно трактуючи “40px 10px” так само, як “40px / 10px”.

Ви можете вказати значення border-radiusу відсотках. Це особливо корисно, коли ви хочете створити форму кола або еліпса, але може бути використано в будь-який час, коли ви хочете, щоб радіус кордону безпосередньо корелювався з шириною елементів.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Примітка: У Safari відсоткові значення для радіуса межі підтримуються лише у версії 5.1+. В Opera підтримується лише у версії 11.5+.

Ось кожна окрема властивість із префіксами постачальника:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Примітка: Кожне з цих значень може також мати значення, відокремлене пробілом, наприклад, “5px 10px”, яке поводиться як значення, розділене косою рискою в скороченні (горизонтальний радіус (пробіл) вертикальний радіус).

Ресурси

Швидкий інструмент для генерації коду радіусу межі
Mozilla Docs
У пошуках ідеального радіуса
Чи нам більше потрібно вводити префікс border-radius?

Ось маленька штучка, щоб пограти з різними властивостями та значеннями:

Дивіться «Перо всі межі-радіус» Кріса Койєра (@chriscoyier) на CodePen.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.