Свойства CSS3! Часть 3. border-radius – закруглённые углы. Применение и кроссбраузерность

Вот уже месяц пытаюсь написать статью в блог, всё никак не нахожу времени. Но с сегодняшнего я постараюсь раз в неделю-две писать сюда всякие полезные и интересные вещи.

Сегодня я хочу рассмотреть ещё одно свойство CSS3, а именно border-radius. Это свойство занимается ничем иным, как скруглением углов у блоков. Удобно? Ещё бы! Хотя, конечно, все уже научились делать пнг-шные байтовые углы, и всё с помощью них делать, но тем не менее этот способ ещё проще.

Итак, свойство работает везде, за исключением ишака до 9 версии (кто бы удивлялся - прим.ред). Для адекватных браузеров свойство записывается по-разному:

Прежде всего рассмотрим по шесть примеров на каждый вариант записи этого свойства и вы увидите, что есть некоторый различия, связанные не только с описанием. Я всё тестировал в более или менее современных браузерах: Firefox 3.6.3, Chrome 7.0, Opera 10.53. Скрины сделаны в указанных браузерах в соответствующем порядке.

Закругление углов -moz-border-radius

Закругление углов -webkit-border-radius

Закругление углов border-radius

Итак, начнём по порядку. Примеры 1-6 работают только в Мозилле, примеры 7-12 только в вебкит браузерах (хром, сафари), а 13-18 работает как в опере, так и в хроме (и вероятно во всех современных вебкит браузерах).

Примеры 1,7,13, 2,8,14 и 5, 11, 17 не рассматриваем, так как они приводят к одному и тому же и перейдём к примерам 3, 9 и 15. В вебкит браузерах нельзя одним свойством задать загругление диагонально-противоположным углам, поэтому используя этот трюк для других браузеров, пользуйтесь для вебкита отдельными записями скругления углов, как в примере 8. Да, и не забываем, что в вебките читаются обычные записи border-radius (не уверен во всех ли веб-китах), поэтому если что, недостаток может ими исправится.

Примеры 4, 10, 16. В Вебките опять проблемы, т.к. показывает он не то, что на самом деле надо. Для вебкитов выход один, как и в примерах 3,9,15 - использовать скругление как в примере 8 и запись обычного border-radius.

Примеры 6, 12, 18. Вроде бы приводят к одному и тому же, но я где-то читал, что слэш в записи параметров используется только в мозилле, а для вебкит браузеров через пробел. Но сдаётся мне, это была недопонятость, а посему использовать можно везде.

Итак, мы имеем свойства для трёх типов браузеров, и чтобы углы скруглялись везде, нужно прописать три различных записи для нужного блока. Однако, из вышесказанного хочу отметить, что порядок записи имеет значение! Рассмотрим два примера.

Думаю понятно, что последующе записанное свойство, если оно актуально для браузера, перезаписывает предыдущее, из-за чего в вебкит браузерах возникает маленький облом. Думаю далее можно без комментариев, ибо в отдельных примерах всё показано =).

Кроссбраузерный border-radius

Для Опер ранее версии 10.50 (именно в ней была добавлена поддержка border-radius) и для ишака есть средство понимания этого свойства (ссыльк)! Используется он просто:

Нюансы

Всё, можно радоваться жизни! Или нет?! Есть пару нюансов.
1) При указании границы блока (border), сглаживание углов в вебкит браузерах угловатое, то ли из-за коцого антиалайсинга, то ли из-за его отсутствия. Но при неконтрастном бордере оно особо и не видно, поэтому это мелочь.
2) А вот если в блоке изображение, то возникает проблема следующего характера: если скругляем блок, не скругляется лежащая в нём картинка. Чтобы избежать этой проблемы, можно попробовать: а) дублирование border-radius и для картинки, но лично у меня оно не привело к нужному результату в Опере (в остальных браузерах окей всё); б) задать картинку для блока в качестве бэкграунда, тогда всё скругляется без вопросов; в) если скругление картинки совсем не в тему, то надо задать padding для блока и не париться, что что-то на что-то наезжает. Исходя из вышесказанного: если нужно закругление для картинки, то проще задать картинку для какого-то блока и затем закруглить блок - так вы избежите некроссбраузерности.

А вот теперь всё! Поддерживаемые браузеры: Opera (10.50 и выше), Firefox (1.0 и выше), Safari (3.0 и выше) и Chrome (все версии). От себя добавлю, что при сложном скруглении углов, этот вариант с хаком для ишака гораздо более практичен, чем всякие аналоги на жабаскрипт-библотеках, т.к. работают гораздо быстрее.

ПыСы. А напоследок ловите картинку-подсказку, чтобы не забыть где какие свойства и к чему они приводят =). Картинка кликабельна

Ссылки по теме

Часть 1. text-shadow: 15 способов применения, кроссбраузерность
Часть 2. box-shadow – тень для контейнеров. Применение и кроссбраузерность
Часть 3. border-radius – rounded corners. Применение и кроссбраузерность
 

border-radius, css3

(голосов: 2, средний: 5.00 из 5)