CSS3 Генератор Радиуса Бордюра

Радиус Бордюра описание ::

CSS3 свойство border-radius(закругление углов) позволяет применить закругленные углы в HTML-элементах, без необходимости использования изображений или других хаков.

Синтаксис довольно прост. Следующее правило устанавливает радиус всех четырех углов элемента с идентификатором "myDiv" на 5 пикселей ::

Мы можем определить радиус каждого угла индивидуально примерно так ::

Это означает что верхний левый угол закруглен на 5 пикселей, верхний правый на 10 пикселей, нижний правый на 20 пикселей и нижний левый закруглен на 15 пикселей.

Это не конец истории, хотя… На момент написания только последние версии самых популярных браузеров поддерживают свойство border-radius. Однако в предыдущих версиях Mozilla и Webkit браузеров поддерживается через встроенные функции с префиксом в правилах. Firefox 3 поддерживает правила border-radius с помощью "-МОЗ-" префикса, в тоже время как в WebKit-браузерах, таких как Safari и Chrome используется "-WebKit-" префикс.

Большая часть пользователей все еще используют эти браузеры, поэтому для использования этих свойств в своих кросс-браузерных проектах, вам следует использовать следующий синтаксис::

Порядок этих правил имеет большое значение. Мы определяем WebKit и Mozilla правила, а затем свойства border-radius. Это связано с тем, что, когда это свойство в конце концов становится стандартизированным, поддержка браузеров будет использовать последнее правило в этом наборе, и игнорировать предыдущие правила.

Может показаться, что это немного загромождает код, но положительный результат того стоит. Если сравнить его с другими методами, которые требуют от браузера загрузки больших изображений фона вы наверняка оцените элегантность этого решения.

Если вы используете CSS3 генератор вы заметите небольшие изменения в работе с разными браузерами. Например Mozilla требует чтобы border-radius в правом нижнем углу должны были определены следующим образом::

В то время как в WebKit-браузерах она должна быть определена так::

Эти изменения трудно запомнить поэтому CSS3Gen очень полезный инструмент.

Поддержка браузеров

На момент написания следующие браузеры поддерживают свойство CSS3 border-radius::