Border radius створюємо закруглені кути за допомогою CSS.

Чудова властивістьCSS3 border-raduis дозволяє легко створюватизакруглені кути без використання зображень або зайвих div тегів. Це одна з найкорисніших і обговорюваних CSS3 властивостей.

З першого анонсу в 2005 році, властивість Border radius стали підтримувати практично всі сучасні браузери (хоча і з деякими особливостями, про які буде сказано нижче). А через простоту використання веб-розробник може легко застосовувати цю технологію у своїх проектах.

Наведу простий приклад:

Теоретично, код для цього прикладу дуже простий:

Однак не все так просто. Для сумісності з Firefox потрібно використовувати префікс -moz- (про це читай секцію підтримки браузерів,moz border radius ):

Як це працює

Існує два способи. Закруглені кути можна створювати індивідуально для кожного кута, використовуючи властивість border-*-radius (border-bottom-left-radius, border-top-left-radius тощо), або використовуючи більш коротку властивість border-radius.

Давайте спочатку розглянемо як використовувати властивість для створення індивідуальних кутів border-*-radius, а потім розберемо короткий аналог border-radius.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

Як радіус можна вказати будь-яке можливе для CSS значення (px, cm, in, em та ін), а також відсотки (у цьому випадку радіус заокруглення вважається від ширини блоку).

Синтаксис:

Приклад:

Необов'язкове друге значення призначене для створення еліптичного куточка,перше значення у своїй встановлює радіус по горизонталі, а друге — радіус по вертикалі.

Якщо вказано лише одне значення, воно визначає як горизонтальний і вертикальний радіус.

На малюнку відображено кілька прикладів різних значень та відповідних їм кутів:

Якщо будь-яке значення дорівнюватиме нулю, то кут буде квадратний, а не круглий.

border-radius

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

Синтаксис:

Приклад:

Перший набір значень (1-4) визначає горизонтальні радіуси всім чотирьох кутів. Опціональний другий набір значень, вказаний після слішу, визначає вертикальні радіуси для всіх чотирьох кутів. Якщо вказано лише один набір значень, він використовується однаково визначення вертикальних і горизонтальних кутів.

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

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

В даний час Opera (версія 10,5 і старші), Safari (версія 5 і старші) Chrome (версія 5 і старші) підтримують як border-radius, так і індивідуальні властивості border-*-radius, описані в поточній специфікації W3C (хоча ще є багато дрібних помилок і неузгодженостей, таких як, наприклад, межі переходу, використання відсотків у довжині і т.д.).

Mozilla Firefox (версія 1.0 та старше) підтримує властивість border-radius з префіксом -moz-, хоч і є деякі розбіжності між реалізацією Mozilla та поточною специфікацією W3C (про це нижче).

Останні версії браузера Firefox усвідомлюють border-radius без префікса -moz-.

Safari і Chrome (а також інші браузери, засновані на движку webkit) підтримують border-radius з префіксом -webkit-починаючи з 3 версії (з 5 версії префікс вже не потрібен), але також з деякими відхиленнями від поточної специфікації.

Internet Explorer 9 так само підтримує якістьborder radius.

Префікс-moz-

Починаючи з 1-ої версії, браузер Mozilla Firefox підтримує якість border-radius з префіксом -moz-. Проте, браузер лише з версії 3.5 став використовувати еліптичні кути, тобто. став приймати два значення для кута, щоб визначити вертикальний і горизонтальний радіуси самостійно. До версії 3.5 браузер приймає лише за одним значенням для кожного кута, внаслідок чого однакові вертикальні та горизонтальні радіуси для кута однакові.

Синтаксис, як і написано в цій статті, використовує префікс -moz-. Основна відмінність тільки в назвах окремих меж властивості border-*-radius, з префіксом -moz- все виглядає трохи інакше:

W3C Specification	Mozilla Implementation
border-top-left-radius	-moz-border-radius-topleft
border-top-right-radius	-moz-border-radius-topright
border-bottom-right-radius	-moz-border-radius-bottomright
border-bottom-left-radius	-moz-border-radius-bottomleft

Метод із використанням відсотків при реалізаціїдля браузера Mozilla трохи відрізняється. Про це можна детальніше прочитати в Центрі розробників Mozilla тут.

Крос-браузерні приклади

Декілька базових прикладів, які відмінно працюють у поточних версіях Firefox, Safari/Chrome, Opera та IE9: