В CSS зададим для него высоту, ширину и цвет фона:

#box {
width : 590px ;
height : 100px ;
background-color : #6B86A6 ; }

Добавляем свойство border-radius:

Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:

#box {
-moz-border-radius: 20px ;
}

Теперь все четыре угла будут иметь радиус 20px:

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

#box {
-moz-border-radius: 20px 40px ;
}

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

#box {
-moz-border-radius: 10px 20px 30px 40px ;
}

Объявляем свойство border-radius для каждого угла

Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:

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

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

#box {
-moz-border-radius-topleft: 30px 15px ;
}

Как Вы можете видеть на картинке верхний левый угол имеет немного "скошенный" вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.

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

#box {
-moz-border-radius: 30px / 15px ;
}

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

Использование свойства 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:

#box {
-webkit-border-radius: 10px 20px 30px 40px ;
}

Правильный код будет выглядеть так.

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius .

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius .

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

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

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

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

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

Пример 1

Moz-border-radius: 20px;

Пример 2

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

Пример 3

Moz-border-radius: 20px 0;

Пример 4

Пример 5

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

Пример 6

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

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

Пример 7

Webkit-border-radius: 20px;

Пример 8

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

Пример 9

Webkit-border-radius: 20px 0;

Пример 10

Пример 11

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

Пример 12

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

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

Пример 13

border-radius: 20px;

Пример 14

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

Пример 15

border-radius: 20px 0;

Пример 16

border-radius: 20px 8px;

Пример 17

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

Пример 18

border-radius: 20px / 8px;

Итак, начнём по порядку. Примеры 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 . Вроде бы приводят к одному и тому же, но я где-то читал, что слэш в записи параметров используется только в мозилле, а для вебкит браузеров через пробел. Но сдаётся мне, это была недопонятость, а посему использовать можно везде.

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

Пример 19 (правильно)
-webkit-border-radius: 20px 8px;
-moz-border-radius: 20px 8px;
border-radius: 20px 8px;

Пример 20 (неправильно)
border-radius: 20px 8px;
-moz-border-radius: 20px 8px;
-webkit-border-radius: 20px 8px;

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

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

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

Boxxx {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
}

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

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

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

Часть 3. border-radius – rounded corners. Применение и кроссбраузерность

Думаю, все знают, что сделать закругленные углы у блоков – большая проблема. Кросс-браузерного решения без применения JS костылей пока не существует. С релизом IE9 головной боли станет меньше, но если вы все еще кипятите верстаете под IE6/7, для вас это не станет спасением. Но даже если IE6/7 канут в лету, еще немало времени пройдет, пока мы забудем о 8-й версии этого браузера, который тоже не поддерживает параметр border-radius. Иными словами, сидеть на яваскриптовых стероидах наши сайты будут еще долго.

Статей на тему округлых форм написано немало, но все они (те, что я смог найти), умалчивают о тонкостях и нюансах применения фиксов для существующей проблемы. Я постараюсь перечислить все те трудности, с которыми мне пришлось столкнуться при использовании популярных решений.

Для начала, скажу пару слов о том, как изменяется ситуация с border-radius при выходе новых версий браузеров.

Во-первых, 4-я версия FireFox теперь не нуждается в своем собственном параметре -moz-border-radius. IE9, как я уже говорил, тоже реализует поддержку border-radius, во всяком случае, в RС версии она уже присутствует. В Opera все замечательно с версии 10.5.

Теперь решения для тех, кого Бог обделил.

И так, существует два наиболее известных и применяемых способа сделать border-radius кросс-браузерным . Первый из них – Curved-corner , использующий VML и behaviour . Второй – CSS3 PIE , который имеет две реализации. Одна также основана на VML и behaviour, вторая представляет из себя JavaScript библиотеку.

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

Curved-corner

Из плюсов я нашел только один – малый вес подключаемого border-radius.htc файла. Текущая версия реализации занимает всего 5кб. Против PIE, который весит 33 кб, безусловно, это значительное преимущество. Но на этом плюсы заканчиваются, во всяком случае для меня.

Минусов очень много. Например, не будет работать такая вот конструкция:

#selector { border: #c6c5c2 1px solid; border-top: none; border-radius: 0 0 6px 6px; background: #f0ecdf; behavior: url(border-radius.htc); }

Во-первых, нельзя убрать рамку с одной из сторон. То есть параметр border-top прибьет рамку вообще всего блока, хотя углы останутся закругленными. Забавно, но параметр border-bottom рамку оставит на месте, но эффекта никакого не даст, то есть бордер останется вокруг всего блока.

Во вторых, если вам необходимо обтесать всего два угла, как в примере, то вас ждет разочарование. Curved-corner такого не умеет. Он может закруглять только все углы блока и на равное значение радиуса. Углов с разным радиусом закругления добиться не получится. Правильные и рабочий вариант выглядит только так:

#selector { border: #c6c5c2 1px solid; border-radius: 6px; behavior: url(border-radius.htc); }

В-третьих, Curved-corner не работает для блоков, у которых в качестве фона задано изображение.

Ну последний неприятный момент – скорость работы. Углы закругляются далеко не сразу. С момента загрузки страницы и до того, как углы примут нужную форму, проходит около секунды. Визуально задержка очень заметна и хорошо бросается в глаза.

Были еще какие-то проблемы (читайте нюансы), но сейчас уже не припомню.

Резюмируя, можно сказать, что данный фикс подходит только для совсем простых задач. Хотя, как показывает практика, такие простые задачи попадаются редко.

CSS3 PIE

Весит много, ничего не скажешь. Версия PIE 1.0 beta 4 занимает 33 кб, как в реализации.htc, так и js аналог. Но при этом CSS3 PIE лишен всех тех проблем с border-radius, которые есть у Curved-corner. Также мне значительно импонирует возможность использовать JS реализацию, которая не требует дополнительного кода в CSS и может цепляться на любой селектор (при использовании jQuery, например).

У CSS3 PIE задержка в отрисовке также присутствует (иногда нет), но значительно меньшая, чем в случае с Curved-corner. Она практически незаметна, что делает библиотеку весьма привлекательной и пригодной к использованию.

Ну и самое замечательное заключается в том, что CSS3 PIE исправляет проблему не только с border-radius , но и добавляет значительно количество свойств CSS3 в кривые майкрософтовские браузеры. Так, например, будут работать border-image и box-shadow, свойства работы с градиентами. Решается проблема прозрачности png и многое другое. Все это лихо компенсирует и объясняет размере CSS3 PIE.

Еще дегтя

Увы, но ни CSS3 PIE, ни Curved-corner не способны заткнуть собой все щели. Так, например, круглых углов вы не получите у тех элементов, которые изначально скрыты – имеют параметр display: none . Аналогично с параметром visible и его значением hidden . Могут возникнуть проблемы, если элемент позиционируется абсолютно. Увы, дать детальное описание ситуации не могу, так как не удалось повторить условия, при которых возникали проблемы, но помню, что проблемы определенно были.

Есть еще одна известная мне загвоздка. Для того, чтобы применить border-radius для элемента при наведении на него курсора мыши, например так:

A:hover { background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px }

Необходимо, чтобы этот элемент имел закругленные углы изначально, иначе эффекта не будет. То есть, в данном примере, должен быть селектор A, у которого также будет задан border-radius и border:

A { background: #fff; color: #000; border: #fff 1px solid; border-radius: 6px } a:hover { background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px }

Итоги

Лично для меня, безусловным фаворитом является CSS3 PIE. Действительно справляется со своей задачей и делает это достойно. Ко всему прочему, библиотека развивается. Это развитие сопровождается регулярным выходом новых версий, что весьма обнадеживает.

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius .

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius .