Круглые углы, border-radius и CSS3


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

К сожалению, на сегодняшний день не все браузеры поддерживают данную возможность. Border-radius работает в Chrome, Firefox и Safari, но отказывается работать в Internet Explorer и Opera. Правда по обещаниям разработчиков и эти браузеры будут его поддерживать начиная с версий Opera 10 и IE 9.

Однако и для этих браузеров есть варианты победить их упорство в этом вопросе. Вы можете ознакомится с этими методами в уроке: "Круглые углы средствами JavaScript и jQuery". Но сначала давайте рассмотрим браузеры поддерживающие border-radius.

Так как CSS3 еще не является стандартом, то для нормальной работы свойства border-radius, в тех браузерах которые его поддерживают, нужно добавлять в CSS префиксы:

  • -webkit-border-radius - для браузеров Chrome и Safari;
  • -moz-border-radius - для FireFox.

Для демонстрации я воспользуюсь помощью блочного тега DIV с идентификатором id="borderRadius", которому задам свойства CSS: ширину, высоту и цвет фона.

#borderRadius { width:500px; height:100px; background-color:#55a1e0; margin: 0 auto; }

Результат:


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

Сначала я рассмотрю параметр -moz-border-radius для браузера FireFox.


Одно значение, задаст одинаковый радиус для всех углов:

#borderRadius { -moz-border-radius: 15px; }

С этими настройками CSS, все углы тега DIV будут с радиусом закругления — 15 пикселей.

Результат:

border-radius_FireFox_1

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

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

Теперь верхний-левый и нижний-правый угол будут иметь радиус 15 пикселей, а верхний-правый и нижний-левый — 30 пикселей.

Результат:

border-radius_FireFox_2

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

#borderRadius { -moz-border-radius: 15px 30px 45px; }

Результат:

border-radius_FireFox_3

Ну и наконец если задать 4 значения border-radius, то каждое будет отвечать за определенный угол двигаясь по часовой стрелке: первое — радиус верхнего-левого угла, второе — радиус верхнего-правого угла, третье — радиус нижнего-правого угла и четвертое — радиус нижнего-левого угла:
#borderRadius { -moz-border-radius: 15px 30px 45px 60px; }

Результат:

border-radius_FireFox_4

Конечно немного авангардно получилось, но для демонстрации пойдет.

Параметр CSS3 border-radius можно назначить и отдельно для любого угла, добавив к “border-radius” дополнение, в зависимости от того угла, какой вы захотите сгладить:

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

Но и это еще не все! Если задать в свойстве для конкретного угла два параметра, то в итоге получим элипсовидный угол.
#borderRadius { -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px 30px; }

Результат:

border-radius_FireFox_5

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

Возможна также и короткая запись при помощи обратного слеша:
#borderRadius { -moz-border-radius: 15px / 30px;}

Здесь первое значение отвечает за радиус по-горизонтали, а второе — за радиус по-вертикали.
Результат:

border-radius_FireFox_6

При желании можно задать разные значения радиуса каждого угла по-горизонтали и по-вертикали, используя следующий код CSS:
#borderRadius { -moz-border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;}

Результат:

border-radius_FireFox_7

В этом CSS коде, первое значение отвечает за радиус по-горизонтали, а второе — за радиус по-вертикали. Как вам такое скругление?


Давайте теперь обратимся к браузерам Safari и Chrome


Одно значение, задаст одинаковый радиус для всех углов:

#borderRadius { -webkit-border-radius:15px;}

Результат:

border-radius_Safari_Chrome_1

Для задания радиуса каждому углу с помощью парамета CSS3 border-radius, в Safari и Chrome используем следующие констукции:

  • -webkit-border-top-left-radius — для верхнего-левого угла;
  • -webkit-border-top-right-radius — для верхнего-правого угла;
  • -webkit-border-bottom-right-radius — для нижнего-правого угла;
  • -webkit-border-bottom-left-radius — для нижнего-левого угла;

Обратите внимание, что в отличии от браузера FireFox в Safari и Chrome возможно задать только одно значение радиуса для всех углов рамки. Если же нужно задать разные радиусы, то они указываются отдельно для каждого угла:

#borderRadius { -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:20px; -webkit-border-bottom-right-radius:30px; -webkit-border-bottom-left-radius:40px; }

Результат:

border-radius_Safari_Chrome_2

И подобно FireFox, Safari и Chrome поддерживают возможность использования разных значений для вертикального и горизонтального радиуса, что позволяет создавать овальные углы:

#borderRadius { -webkit-border-top-left-radius:15px 30px;}

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

#borderRadius { -webkit-border-radius:15px 30px;}

Результат:

border-radius_Safari_Chrome_3

Ну и наконец рассмотрим браузеры Internet Explorer и Opera


Так как я довольно редко пользуюсь этими браузерами, то и информация по ним будет чисто ознакомительной. А если кому приспичит, то милости просим - разбирайтесь! Отмечу только что приведенные методы работают, но не на все 100%.

Итак CSS код кроссбраузерного варианта border-radius с учетом всех браузеров:

#borderRadius { width:500px; height:100px; margin: 0 auto; background-color: #55a1e0; border-radius: 15px; -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari и Chrome */ behavior: url(ie-css3.htc); /* Поддержка IE 6,7,8. */ background: #55a1e0 /* Opera */ url(data:image/svg+xml;charset=utf-8;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZ pbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaW xsPSIjNTVhMWUwIiByeD0iMTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=); }

VML-скрипт ie-css3.htc берем с http://fetchak.com/ie-css3/
Генератор CSS3 border-radius специально для поддержки border-radius в Opera 9.64 и IE: http://www.aimweb.ru/border

Результат:


Ну вот теперь вроде бы действительно все. Если возникнут вопросы пишите в комментариях.

Автор: Сергей Зарубин

Дата: 2011-07-07

Колличество просмотров: 12875

Нравится

Комментарии к заметке:

Комментарий добавил(а): Георгий
Дата: 2012-05-16

спасибо, хорошая статья, может напишешь CSS код для интернет экспловер 9

Комментарий добавил(а): wdtime.ru
Дата: 2014-05-16

Подробно о <a href="http://wdtime.ru/css/border-radius-css" title="border-radius css">border-radius css</a>

Комментарий добавил(а): Nikolai
Дата: 2014-05-20

так же небольшие 5 копеек по теме (Кроссбраузерно): http://finego.ru/tools/border-radius-generator

Комментарий добавил(а): Dudnickov
Дата: 2014-11-05

почему на мазилу не работает???



Добавить новый комментарий


Введите число с картинки:

captcha