Закругленные углы в CSS3

26.08.2009 css3, браузеры

В документации CSS 3 Backgrounds and Borders module описано свойство border-radius, позволяющее создать закругленную границу вокруг прямоугольного блока. Браузеры на основе движка Gecko (Firefox и SeaMonkey), а также Webkit браузеры (Safari и Chrome) частично поддерживают данное свойство. В Firefox 3.5 добавлена поддержка эллиптических углов и доведена реализация Gecko на уровень стандартов во многих деталям.

На момент написания статьи модуль фона и границ (Backgrounds and Borders module) остаются черновым документом W3C, поэтому при именовании данных свойств все браузеры должны использовать вендорные префиксы. В примерах данной статьи мы будем использовать стандартные названия свойств. Вендорные префиксы можно найти в этой заметке. Согласно политики компании Mozilla стандартные имена начинают использовать как только модуль становится рекомендованным или правильнее сказать, достигает состояния Candidate Recommendation stage (bug 451134)

Введение в закругленные углы

В простейшей форме свойство border-radius принимает единственное значение <length>, закругляя все четыре угла блока. Если необходимо задать разные радиусы закругления, то необходимо перечислить значения <length> привычным способом, начиная сверху и по часовой стрелке. При указании двух или трех значений, пропущенные значения берутся из противоположных углов (top, right, bottom, left). Для контроля закругления каждого отдельного угла можно также использовать т.н. «longhand» свойства:

• border-top-left-radius,
• border-top-right-radius,
• border-bottom-right-radius и
• border-bottom-left-radius

Backgrounds module добавляет возможность создания эллиптических углов. При использовании «longhand»-свойств необходимо просто добавить в свойство второе значение <length>; первое значение определяет горизонтальную полуось эллипса, второе — вертикальную. При сокращенной форме записи свойства border-radius сначала указываются значения радиуса горизонтальной полуоси, далее прямой слеш / и значения радиуса вертикальной. Если слеш отсутствует и указано только одно значение <length>, то горизонтальный и вертикальный радиусы равны.

Например,

border-radius: 4em;

эквивалентно

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

или

border-radius: 2em 1em 4em / 0.5em 3em;

эквивалентно

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

Без вендорного префикса	Gecko (-moz)	Webkit (-webkit)	Правильное отображение
border-radius:10px;	-moz-border-radius: 10px;	-webkit-border-top-left-radius:10px; -webkit-border-bottom-right-radius:10px;
border-radius:10px 0;	-moz-border-radius: 10px 0;	-webkit-border-top-left-radius:10px; -webkit-border-bottom-right-radius:10px;
border-radius:10px 0px 20px;	-moz-border-radius:10px 0px 20px;	-webkit-border-top-left-radius:10px; -webkit-border-bottom-right-radius:20px;
border-radius:10px 0px 20px 30px;	-moz-border-radius:10px 0px 20px 30px;	-webkit-border-top-left-radius:10px; -webkit-border-bottom-right-radius:20px; -webkit-border-bottom-left-radius:30px;
border-top-left-radius:20px 30px;	-moz-border-radius-topleft:20px 30px;	-webkit-border-top-left-radius:20px 30px;
border-radius:10px 0 / 30px 0;	-moz-border-radius:10px 0 / 30px 0;	-webkit-border-top-left-radius:10px 30px; -webkit-border-bottom-right-radius:10px 30px;
border-radius: 10px / 30px 30px 10px 10px;	-moz-border-radius:10px / 30px 30px 10px 10px;	-webkit-border-top-left-radius:10px 30px; -webkit-border-top-right-radius:10px 30px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px;

Webkit не воспринимает border-radius как сокращенную форму записи и принимает только одно значение <length>. Если вам необходимо задать разные значения закругления углов, необходимо использовать полную «longhand» форму записи свойства.

Закругления углов. Немного теории

Свойство border-radius контролирует горизонтальную и вертикальную полуоси внешней дуги границы. Радиус внутренней границы равен радиусу внешний (border-radius) минус толщина границы (border-width). Если это значение будет отрицательным или равным нулю, то радиус внутренней дуги будет равен нулю. Таким образом, если две смежные границы имеют различную толщину появится плавный переход от более широкой к более узкой границе. (Рис. 1)

Место перехода цвета и стиля между соединяющимися границами находится в точке кривой, которая располагается под углом пропорциональным соотношению значений ширины смежных границ. Например, если значения ширины смежных границ равны, то точка перехода расположена под углом 45°, если ширина одной границы больше другой в два раза, то точка перехода находится под углом 30° и т.д. Линия, разделяющая переход проходит под этим углом через внутреннюю и внешнюю границу дуги. Линия раздела создает видимую границу между смежными границами различного цвета. W3C не говорит, как должен выглядеть переход, но рекомендует применять градиент, который не относится к dotted или dashed границам.

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

Пусть f = min(L_i/S_i), где i ∈ {top, right, bottom, left}, S_i сумма радиусов угла стороны i, и L_top = L_bottom = ширине блока, L_left = L_right = высоте блока. Если f < 1, тогда все радиусы углов уменьшаются путем умножения в f.

Данная формула имеет преимущества и недостатки:

… формула проверяет чтобы четверти круга оставались четвертями и бóльшие радиусы оставались больше, чем меньшие, однако формула может уменьшить и меньшие углы, что изменит вид границ, которые должны выглядеть неизменными.

На момент написания статьи данная формула работает в Firefox 3.5 и последних версиях Webkit (library version 1.1.8 и позже; 8736). Более старые версии Gecko-браузеров масштабируют каждую дугу угла независимо и ограничивает угол до половины размера блока. Старые версии Webkit-браузеров игнорируют все угловые радиусы, если сумма радиусов больше размера блока.

Если граница не solid?

С границами inset, outset, double, groove и ridge в принципе все в порядке.

Границы dotted и dashed в местах закруглений должны отображаться точками или пунктирными линиями соответственно. Gecko-браузеры вообще не поддерживают точки и пунктир в дугах и отображают их сплошной линией (bug 382721). Webkit-браузеры рисуют точки или пунктир, однако могут наблюдаться артефакты.

Clipping

Цветовой фон и фон с изображениями обрезается по краям закруглений. Наличие границы при этом не является обязательным условием. border-image не обрезается, а вот фон по прежнему обрезается по дуге, даже если не задана граница.

Контент не обрезается в принципе. Однако, если воспользоваться свойством overflow:hidden контент должен обрезаться по дуге. Webkit поддерживает частично (bug 9543), Gecko, как и старые версии WebKit не поддерживают (bug 459144).

Спецификация говорит: Если в закругленном угле находится scrolling ПА могут уменьшить или обнулить border-radius. Другими словами, если есть скроллбар (overflow:scroll или overflow:auto), закругленных углов можно не увидеть Обосновано это тем, что скроллбар сам по себе не может быть обрезан.

По умолчанию, clipping path представляет из себя внешний закругленный прямоугольник, и фон будет виден под границей, при условии что граница не полностью прозрачная. Backgrounds module включает свойство background-clip, которое определяет границу заливки фона. Gecko и Webkit частично поддерживают это свойство, однако соответствуют устаревшей спецификации и вместо border-box и padding-box используют border и padding; content-box и no-clip не поддерживаются.

Таблица совместимости

Источники:

• CSS Backgrounds and Borders Module Level 3
• Boxes with Rounded Corners