Круглые углы при помощи CSS3 border-radius
Автор: alexnjoy | Категория: Web Design | Комментарии: 22 | 21-03-2010
В интернете уже давно просматривается тенденция использования закругленных элементов дизайна сайтов и блогов. Возможно вы не обращали своё внимание на это, но присмотритесь и вы увидите кнопки с закругленными углами, рамки с закругленными углами, сайдбар с закругленными элементами и боксами... Раньше все эти элементы дизайна создавались при помощи готовых картинок углов, нарисованных в фотошопе круглых кнопок или при помощи скриптов. С появлением CSS3 все стало намного легче.
Сегодня я напишу про свойство CSS3 — border-radius (css3 радиус рамки / css3 радиус границы). При помощи CSS3 border-radius вы сможете создать очень популярный эффект закругленных углов для ваших кнопок, рамок и боксов, используя лишь CSS, никаких картинок и скриптов ненужно.
Поддержка браузеров
А начну я с браузеров, так как CSS3 поддерживается не всеми браузерами (пока еще).
Параметр CSS3 border-radius видит:
— Firefox (начиная с версии 3.0)
— Safari (начиная с версии 3.1)
— Chrome (начиная с первой версии)
CSS3 border-radius не видят:
— Internet Explorer
— Opera
Opera 10 — будет поддерживать, IE 9 — хрен его знает говорят что будет.
Вот статистика браузеров, которые используют посетители моего блога:
Получается, что только 50% посетителей видят блог Designzo.com правильно )).
Так как CSS3 еще не стал стандартом, вы должны добавлять префиксы для параметра border-radius, для того, чтобы он работал с браузерами, которые его поддерживают. Если вы хотите чтобы он работал с FireFox, вы должны написать -moz-border-radius в CSS; если вы хотите, чтобы он работал с Safari/Chrome, вы должны написать -webkit-border-radius.
Имейте ввиду, что FireFox, Safari и Chrome поддерживают border-radius, но видят они его немного по разному. Чтобы вам было легче понять, я, для начала, объясню вам как CSS3 border-radius работает с FireFox, а потом расскажу про разницу с Safari и Chrome.
Бокс
Давайте начнем с создания бокса, с которым мы будем экспериментировать и приписывать ему параметр CSS3 border-radius (css3 радиус рамки / css3 радиус границы). В HTML мы создаем простой пустой бокс с id="box":
<body> <div id="box"></div> </body>
В стилях CSS, мы задаем ему ширину, высоту и цвет заднего фона:
#box {
width:590px;
height:100px;
background-color:#6B86A6;
Назначаем параметр border-radius
Параметр CSS3 border-radius (css3 радиус рамки / css3 радиус границы) назначается точно также, как и параметры margin (поля) и padding (отступ). Параметр может быть задан один, для всех четырёх углов одновременно, либо вы можете задать значение каждому углу отдельно.
Назначение параметра border-radius через shorthand (одной строкой)
Если использовать shorthand параметры (однострочные), указание одного значения, задаст одинаковый радиус для всех углов:
#box { -moz-border-radius: 20px; }
С этими настройками CSS, все углы вашей рамки (или бокса) будут с радиусом закругления — 20 пикселей. У вас должно получится следующее:
Если задать два значения, то первое число будет задавать радиус для верхнего-левого и нижнего-правого угла, а второе число будет задавать радиус для верхнего-правого и нижнего-левого угла вашего бокса:
#box { -moz-border-radius:20px 40px; }
С этими параметрами CSS, верхний-левый и нижний-правый угол будут иметь радиус 20 пикселей, а верхний-правый и нижний-левый — 40 пикселей. У вас должно получится следующее:
Вы можете задать и три значения: первое будет радиусом верхнего-левого угла, второе будет радиусом верхнего-правого и нижнего-левого угла, а третье будет радиусом нижнего-правого угла:
#box { -moz-border-radius:20px 40px 5px; }
С этими параметрами CSS, верхний-левый угол будет с радиусом 20 пикселей, верхний-правый и нижний-левый угол будут с радиусом 40 пикселей, а нижний-правый угол будет с радиусом 5 пикселей. Выглядит это так:
Последний вариант — задать 4 значения border-radius, каждое будет отвечать за определенный угол: первое — радиус верхнего-левого угла, второе — радиус верхнего-правого угла, третье — радиус нижнего-правого угла и четвертое — радиус нижнего-левого угла:
#box { -moz-border-radius:10px 20px 30px 40px; }
С этими параметрами CSS, верхний-левый угол будет с радиусом 10 пикселей, верхний-правый угол будет с радиусом 20 пикселей, нижний-правый угол будет с радиусом 30 пикселей, а нижний левый угол будет с радиусом 40 пикселей:
Задаем значение CSS3 border-radius отдельно для каждого угла
Если вам нужно назначить параметр CSS3 border-radius отдельно для какого-нибудь угла, вы можете это сделать, добавив приставку к “border-radius”. Она зависит от угла, который вам нужно округлить.
Вот список приставок:
- -moz-border-radius-topleft — для верхнего-левого угла;
- -moz-border-radius-topright — для верхнего-правого угла;
- -moz-border-radius-bottomright — для нижнего-правого угла;
- -moz-border-radius-bottomleft — для нижнего-левого угла;
Значит, для примера, если вы хотите округлить верхний-правый угол, используйте следующий код:
#box { -moz-border-radius-topright: 30px; }
Вот что у вас получится:
Создаем овальные углы
Я вам уже рассказал и привел примеры о том, как при помощи параметров CSS3 border-radius (css3 радиус рамки / css3 радиус границы) сделать каждый угол закругленным. Но используя CSS3, вы можете сделать углы и другой формы, например овальные / эллипсообразные (четверть эллипса).
Давайте сделаем левый-верхний угол бокса круглым, при помощи кода CSS3:
#box { -moz-border-radius-topleft: 30px; }
Вот то, что должно получится:
Верхний-левый угол — идеальная четверть круга. Давайте добавим еще одно значение к предыдущему коду CSS3:
#box { -moz-border-radius-topleft: 30px 15px; }
Наш верхний-левый угол теперь имеет форму четверти эллипса. Так случилось потому-что два значения задают радиус по-горизонтали и по-вертикали. Если ввести только одно значение, то браузер будет считать этот радиус и по-вертикали, и по-горизонтали (в этом случае получается четверть круга).
Делаем овальные углы при помощи короткого кода
Как нам сделать овальные углы при помощи короткого кода? Используя слеш ( «/» ). Посмотрите на следующий CSS код:
#box { -moz-border-radius: 30px / 15px; }
В этом CSS коде, первое значение отвечает за радиус по-горизонтали, а второе — за радиус по-вертикали.
Если вам нужно задать разные значения радиуса каждого угла вашего бокса по-горизонтали и по-вертикали, используйте следующий код CSS (впишите нужные вам значения):
#box { -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
Вот то, что у вас должно получится:
Зачем вам нужна рамка такой странной формы? — не знаю 
. Может и пригодится, моё дело — рассказать и показать.
Теперь поговорим об Safari и Chrome
Как я уже писал вначале этой инструкции, все что написано выше — работает в Firefox, в то время как Safari и Chrome используют немного другие приставки в коде.
Задаем радиус углов рамки для Safari и Chrome
Чтобы задать радиус каждому углу рамки в Safari и Chrome, используя параметр CSS3 border-radius, вам нужно использовать другие приставки. Вот список:
- -webkit-border-top-left-radius — для верхнего-левого угла;
- -webkit-border-top-right-radius — для верхнего-правого угла;
- -webkit-border-bottom-right-radius — для нижнего-правого угла;
- -webkit-border-bottom-left-radius — для нижнего-левого угла;
Используем короткий код для border-radius в Safari и Chrome
Для Safari и Chrome возможно задать только одно значение радиуса для всех углов рамки. Если вы хотите задать разные радиусы, то вам нужно будет указывать их отдельно, для каждого угла.
Чтобы достичь желаемого эффекта, используйте следующий код CSS:
#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px; }
Горизонтальные и вертикальные радиусы в Safari/Chrome
Safari и Chrome поддерживают возможность использования разных значений для вертикального и горизонтального радиуса. Это дает нам возможность создавать овальные углы. Чтобы сделать верхний-левый угол в форма эллипса, используйте следующий код CSS:
#box { -webkit-border-top-left-radius: 30px 15px; }
Что касается короткого кода, то в Safari и Chrome мы можем задать его только в том случае, когда значение для всех углов будет одинаковым:
#box { -webkit-border-radius: 30px 15px; }
В результате у нас должна получится вот такая рамка:
Где можно использовать параметр CSS3 border-radius?
Ответ очень простой: вы можете использовать CSS3 border-radius везде. Каждая часть элемента сайта или блога состоит из HTML/PHP кода, который находится в боксе/рамке/div. Параметр border-radius можно использовать при оформлении меню навигации сайта, в параграфах, можно округлять изображения, оформлять списки, рамки, кнопки... посмотрите на мой блог и вы увидите, что я люблю использовать border-radius в дизайне )).
Не забывайте, что когда вы используете параметр border-radius, задавайте параметры для всех браузеров, чтобы ваш блог/сайт выглядел одинаково для всех пользователей.
Вот вам пример использования параметра border-radius: бокс, меню с круглыми ссылками (кнопками) и еще один бокс, но с круглой рамкой.
- Как вам "Круглые углы при помощи CSS3 border-radius" ?
- Следи за обновлениями Desigzo, подпишись на RSS или Twitter!
до этого момента использовал вариант для FF, думая что Safari и Chrome не поддерживают это свойство, но были сомнения, ввиду того что они по идее самые передовые браузеры
[Ответить]
alexnjoy ответил:
Март 22nd, 2010 в 23:47
Жаль что Опера тормозит с этими параметрами, аж 32 процента моих читателей висят на опере... никогда не воспринимал ее как браузер
[Ответить]
oligarh39 ответил:
Апрель 12th, 2010 в 19:31
Я тоже... Работаю в Мозиле!!!
[Ответить]
опера 10.5 поддерживает CSS3, ослик 9 — тоже.
Плюс стараемся охватить больше браузеров и не забываем про -khtml-border-radius
[Ответить]
alexnjoy ответил:
Март 23rd, 2010 в 2:41
Opera 10.5 да, но она еще пре-альфа... потому я и не писал про нее, надо будет дописать... -khtml-border-radius может и добавлю
[Ответить]
gwer ответил:
Март 23rd, 2010 в 23:20
Я вас обрадую — релиз оперы 10.5 был 19 февраля
[Ответить]
alexnjoy ответил:
Март 24th, 2010 в 1:54
У меня Мак, для него еще не вышла
gwer ответил:
Март 24th, 2010 в 15:06
А на окошках сегодня уже 10.51 релиз))
На картинки со статистикой Designzo.com опечатка в Safari.
[Ответить]
alexnjoy ответил:
Март 23rd, 2010 в 10:53
Знаю... заметил, когда пост уже был готов. Лень было переделывать )
[Ответить]
Chome и IE9 понимают border-radius без всяких приставок. На мой взгляд использование приставок для закругленных углов — вчерашний день. Так что за указанными браузерами будущее в гонке лидеров.
[Ответить]
alexnjoy ответил:
Март 23rd, 2010 в 21:02
Да... но только новые версии. А пока лидирует FireFox
[Ответить]
пишу коммент из Оперы 10.51.
специально ее открыл, проверить.
сайдбар на этом блоге в прямоуголной рамке, хотя в Firefox — все кругло!
неужели Опера не сделала анонсируемую поддержку?
[Ответить]
alexnjoy ответил:
Март 26th, 2010 в 10:32
Вот сегодня хочу с Оперой разобраться
[Ответить]
млин вот я отсталый.
все еще картинки рисую. за статью спасибо. сунул в закладки , пригодится когда буду верстать.
да,да в опере не работает(
[Ответить]
Chome и IE9 понимают border-radius без всяких приставок. На мой взгляд использование приставок для закругленных углов — вчерашний день. Так что за указанными браузерами будущее в гонке лидеров.
[Ответить]
alexnjoy ответил:
Май 29th, 2010 в 10:30
Статья писалась давно, за это время многое изменилось... пройдет еще немного времени и что-то еще изменится
[Ответить]
Параметр border-radius можно использовать при оформлении меню навигации сайта, в параграфах, можно округлять !!!изображения!!!, оформлять списки, рамки, кнопки...
обрыскал инет, так и не нашёл , как можно закруглить края изображения ? к примеру есть
как округлить его края?
[Ответить]
всё, сам разобрался, додумался залезть на баг трекер лисички по теме ксс3, известный баг что изображения не загругляются ( а жаль , когда же наступит будущее
[Ответить]
-moz- нахрен не нужно писать и в любом бразузере будет видно, Делов то!
Firefox
Safari
Chrome
Internet Explorer
Opera
Лично проверял
[Ответить]
Забавно так получается, что на настоящий момент только Опера и имеет поддержку CSS3 border-radius, потому как в CSS3 ничего никаких таких -moz-border-radius-topleft,
-moz-border-radius-topright и прочих нет
Довольно обидно, что и сайты используют проприетарные свойства, вместо CSS3.
Может Вы будете одним из первых?
[Ответить]
Как сделать наклонный градиент, заданный в градусах, для webkit, как здесь? emfire.ru
[Ответить]