Створюємо закруглені куточки за допомогою CSS 3

створюємо

Одна з найбільш очікуваних властивостей CSS3, безсумнівно, властивість border-radius. За допомогою властивостіborder-radius можна створювати такі популярні останнім часом прямокутники із закругленими кутами, виключно засобами CSS, не використовуючи жодних зображень.

Кросбраузерна сумісність.

На жаль, CSS3 ще не підтримується всіма браузерами. Властивістьborder-radius підтримується Firefox (починаючи з версії 3.0), Safari (з версії 3.1) та Chrome (з найпершої версії), але воно не підтримується Internet Explorer і Opera (буде реалізовано в Opera 10).

Так як CSS3 ще не є стандартом, Ви повинні додавати префікс для властивостіborder-radius, щоб воно працювало в браузерах, які його підтримують. Якщо Ви хочете, щоб воно працювало в Firefox необхідно написати в стилях-moz-border-radius, для Safari/Chrome ця властивість матиме такий вигляд --webkit-border-radius.

Майте на увазі, що хоча Firefox, Сафарі і Хром підтримують цю властивість, вони реалізують його трохи різними методами. Я спочатку покажу Вам, як воно реалізовано Firefox і потім поясню відмінності у Safari та Chrome.

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

У CSS задамо для нього висоту, ширину та колір фону:

Додаємо властивість border-radius:

Властивість border-radius оголошується подібно до властивостей margin і padding. Ви можете використовувати як короткий запис цієї властивості для всіх чотирьох кутів прямокутника, так і окремо для кожного кута. При короткому записі вказується одне значення для кожного кута:

Тепер всі чотири кути матимуть радіус 20px:

Ви також можете вказати два значення, перше з яких будевизначати радіус для верхнього лівого та нижнього правого кута, а друге – для верхнього правого та нижнього лівого:

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

Оголошуємо властивістьborder-radius для кожного кута

Якщо ви хочете використовувати цю властивість тільки для одного кута, достатньо додати відповідне закінчення до властивості:

  • -moz-border-radius-topleft для верхнього лівого кута;
  • -moz-border-radius-topright для верхнього правого кута;
  • -moz-border-radius-bottomright для нижнього правого кута;
  • -moz-border-radius-bottomleft для нижнього лівого кута;

Горизонтальний та вертикальний радіус

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

При короткому запису цієї властивості значення для горизонтального та вертикального радіусу поділяються слешем:

#box < -moz-border-radius: 30px / 15px; >

#box < -moz-border-radius : 10px 20px 30px 40px / 5px 10px 15px 20px; >

Використання властивостіborder-radius у Safari та Chrome.

Safari і Chrome використовують трохи інший синтаксис, основною відмінністю є використання префікса-webkit, замість-moz :

  • -webkit-border-top-left-radius для верхнього лівого кута;
  • -webkit-border-top-right-radius для верхнього правого кута;
  • -webkit-border-bottom-right-radius для нижнього правого кута;
  • -webkit-border-bottom-left-radius для нижнього лівого кута;

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

Цей кодне працюватиме у Safari та Chrome:

Правильний код виглядатиме так:

Горизонтальний та вертикальний радіусв Safari та Chrome.

У Safari та Chrome можна також вказувати горизонтальний та вертикальний радіус:

При короткому записі можна вказувати горизонтальний і вертикальний радіус всім кутів прямокутникатільки якщо ці значення однакові кожному за кута. Також не потрібне використання слешу: