CSS3 - border-radius

Ещё одно свойство CSS3 - border-radius. Это свойство занимается ничем иным, как скруглением углов у блоков.

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

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

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

-moz-border-radius: 20px;

-moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;

-moz-border-radius: 20px 0;

-moz-border-radius: 20px 8px;

-moz-border-radius-topright: 20px 8px;
-moz-border-radius-bottomright: 20px 8px;

-moz-border-radius: 20px / 8px;

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

-webkit-border-radius: 20px;

-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;

-webkit-border-radius: 20px 0;

-webkit-border-radius: 20px 8px;

-webkit-border-top-right-radius: 20px 8px;
-webkit-border-bottom-right-radius: 20px 8px;

-webkit-border-radius: 20px / 8px;

Закругление углов 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

Используется он просто: