Заоблени ъгли. Звучи толкова примамливо. Ако се занимаваш с уеб от достатъчно дълго време, сигурно си спомняш колко трудно беше и колко време отнемаше, за да се добавят заоблени ъгли към някой елемент. Процеса беше дълъг и не се отдаваше на всеки. За сметка на това пък резултата наистина си заслужаваше. За радост, това остана в миналото.

Днес, създаването на заоблени ъгли е по-лесно от всякога. Благодарение на CSS3 свойството border-radius, добавянето на заоблени ъгли може да бъде направено дори и от първокласник. Най-хубавото от всичко е, че ще ти отнеме не повече от 5 минути, за да усвоиш това свойство. Всички съвременни браузъри вече го поддържат, което означава че можеш свободно да го използваш в своя уеб сайт.

Структура на урока

• Какво е border-radius?
• Настояща браузърна поддръжка
• Как работи
  • Съкратено свойство
  • Разширено свойство
  • Задаване на две стойности
  • Заобляне на ъгли чрез border-*-*-radius
• Поддръжка на по-стари браузъри
  • Firefox
  • Chrome и Safari
  • Internet Explorer < 9
• Полезни линкове
• Заключение

Какво е border-radius?

Това е CSS3 свойство, чрез което бързо и лесно можеш да заоблиш ъглите на даден елемент в настоящата уеб страницата. Border-radius е доста гъвкаво свойство, което може да приеме различни на брой стойности. Всичко това ще го разгледаме в този урок.

Настояща браузърна поддръжка

Всички съвременни браузъри поддържат това свойство. Дори Internet Explorer 9. Ето един по-подробен списък:

Desktop версии

• IE 9+;
• Firefox 4+;
• Chrome 5+;
• Safari 5+;
• Opera 10.5+;

Мобилни версии

• iOS Safari 4+;
• Android 2.2+;
• Opera Mobile 11.0+;
• Opera Mini - Не се поддържа;

По-стари браузъри (Повече информация)

• Firefox < 4 изисква представка –moz-;
• Chrome < 4 и Safari < 5 изискват представка –webkit-;
• Internet Explorer < 9 … просто не го поддържат. Както и да е, има начин да се заобиколи (повече за това).

Как работи

Всяка от стойностите на border-radius може да бъде в един от тези два типа:

• дължина (length) - Това са всички валидни CSS стойности за дължина като px, em, cm, mm и т.н.
• процент (%) – Това се определя като част от ширината и/или височината на елемента.

Негативните числа се считат за невалидни. Стойността по подразбиране е 0.

Ще започнем от съкратеното свойство на border-radius, защото с него се работи най-лесно.

Съкратено свойство

Свойството border-radius може да приеме една единствена стойност, която ще заобли еднакво всички ъгли на елемента. Това е т.нар. съкратено свойство. Резултата е ясно видим в следващия пример.

Демо.

Както виждаш, не би ти отнело и минута, за да заоблиш ъглите на някой елемент.

Тук обаче идва един доста логичен въпрос.

Съкратеното свойство ни позволява да заоблим всички ъгли наведнъж. Да, обаче аз искам да заобля само горните два ъгъла. Как ще стане това?

Радвам се, че попита. Това става чрез задаване на отделна стойност за всеки ъгъл.

Разширено свойство

Демо.

Свойсвото е абсолютно същото, но този път броя на стойностите е по-голям. Тук задаваме четири отделни стойности (по една за всеки ъгъл). Те се задават в следния ред: горен-ляв, горен-десен, долен-десен и долен-ляв ъгъл.

Няма нищо сложно нали? Използването на border-radius е супер лесно и разбираемо. Какво ще стане обаче, ако зададем само две стойности, а не четири?

Задаване на две стойности

Има още един трик, който искам да ти разкрия. Ако зададеш само две стойности, тогава първата ще отговаря за заоблянето на горен-ляв и долен-десен ъгъл, а втората ще отговаря за заоблянето на горен-десен и долен-ляв ъгъл.

Демо.

Започна да става интересно. Ами ако стойностите са три? Е ... оставяме те да експериментираш.

Може би забелязваш обаче, че има един малък проблем в горните примери. Той е, че не можем да заоблим един единствен ъгъл без да зададем стойности на останалите. За тази цел можем да използваме свойството border-*-*-radius.

Заобляне на индивидуален ъгъл чрез border-*-*-radius

Чрез свойството border-*-*-radius имаш по-голям контрол върху заоблянето на индивидуални ъгли. Например горен-десен.

На мястото на * трябва да поставиш една от следните ключови думи: top, bottom, left или right. Комбинацията от тези думи ще ти позволи да се фокусираш върху един единствен ъгъл.

Това свойство може да приеме две стойности, но втората не е задължителна. Първата стойност определя хоризонталната граница на заобляне, а втората – вертикалната. В случай, че зададем само една стойност, тя ще бъде използвана и за двете граници.

Това става ясно от изображението долу.

copyИзчистенПрозорец

border-top-left-radius: 15px; (1) 
                        15px 15px; (2) 
                        30px 50px; (3) 
                        50px 30px; (4)

border-top-left-radius: 15px; (1) 						15px 15px; (2)                         30px 50px; (3)                         50px 30px; (4)

Демо.

Във фиг. 1 използваме само една стойност, която се прилага хоризонтално и вертикално.

Във фиг. 2 използваме две еднакви стойности, които дават същия резултат като фиг. 1.

Във фиг. 3 използваме две различни стойности. Първата се прилага по хоризонтала, а втората по вертикала.

Фиг. 4 е подобна на фиг. 3. Разликата е, че стойностите са разменени.

Както виждаш, много лесно можеш да усвоиш начина на работа на border-*-*-radius.

Другите възможни комбинации са: border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius. Пробвай ги, за да видиш как работят.

Поддръжка на по-стари браузъри

До тук нещата изглеждат наистина елементарни. Ще се радвам, ако ти също мислиш така. Както казах по-рано, border-radius работи безпроблемно във всички съвременни браузъри. Какво трябва да правиш обаче, за да проработи и в по-старите? Ето няколко предложения.

Важно е да отбележа, че вече все по-малко хора използват тези т.нар. “стари” браузърни версии (IE е малко по-специален случай). Предложенията по-долу ще ти помогнат да “подкараш” свойството, но аз лично ти предпоръчвам първо да провериш статистиката на сайта си и да видиш колко посетителя всъщност влизат в сайта през тези браузъри.

Ако голяма част от тях (да кажем 15%) все още ги използват, тогава може би си заслужава добавянето на всичкия този допълнителен код. Ако обаче статистиката показва, че само 10-20 човека в последния месец са влезли през Firefox < 4 или IE 6 (в което съм почти 100% убеден), тогава може би трябва да помислиш дали е добре да ги поддържаш.

Замисли се, ако ъглите на някои от елементите са остри, а не заоблени, това няма да направи сайта ти по-неизползваем.

Оставям решението на теб.

Firefox

Става въпрос за версиите преди 4.

За да ги поддържаш, простро трябва поставиш представката –moz- пред border-radius. Добра идея е този ред да бъде преди официалното свойство. Така, в случай че браузъра не го разбере, просто ще го игнорира.

copyИзчистенПрозорец

-moz-border-radius: 15px; /* Поддръжка на Firefox < 4 */
border-radius: 15px;

-moz-border-radius: 15px; /* Поддръжка на Firefox < 4 */border-radius: 15px;

Chrome и Safari

Става въпрос за версиите преди 4 (на Chrome) и 5 (на Safari).

Представката, която трябва да използваш тук е –webkit-. Добавя се преди border-radius. Тук също се препоръчва този ред да бъде преди официалното свойство. Комбинирайки го с предното, това ще стане така:

copyИзчистенПрозорец

-moz-border-radius: 15px; /* Firefox < 4 */
-webkit-border-radius: 15px /* Chrome < 4, Safari < 5 */
border-radius: 15px;

-moz-border-radius: 15px; /* Firefox < 4 */-webkit-border-radius: 15px /* Chrome < 4, Safari < 5 */border-radius: 15px;

Internet Explorer < 9

За съжаление, по-старите версии на Internet Explorer (< 9) игнорират изцяло border-radius, което всъщност не е голяма изненада.

Единствения начин, който съм открил (за сега) е като се използва CSS3 PIE. Това е специален файл, който се добавя задължително като последна декларация на текущия селектор.

В урока “Заоблени ъгли в Internet Explorer 6-8” можеш да прочетеш повече.