Круглые углы при помощи CSS3 border-radius
Автор: alexnjoy | Категория: Web Design | Комментарии: 47 | 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
Я тоже... Работаю в Мозиле!!!
[Ответить]
august_dioz ответил:
Июль 8th, 2011 в 15:47
Вот создаю сайт, пользуюсь, на свою бедную голову, оперой 11.5... Она эту функцию вообще не отображает(((
опера 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
[Ответить]
U ответил:
Август 5th, 2011 в 12:47
Ага. Хром поддерживает пидарасов, ие так и не научился поддерживать полупрозрачность... Будущее за геями и тормозами? Мне бы не хотелось жить в таком будущем
[Ответить]
пишу коммент из Оперы 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
Лично проверял
[Ответить]
august_dioz ответил:
Июль 8th, 2011 в 15:54
А вот и нет. В опере 11.5 не работает!
[Ответить]
Забавно так получается, что на настоящий момент только Опера и имеет поддержку CSS3 border-radius, потому как в CSS3 ничего никаких таких -moz-border-radius-topleft,
-moz-border-radius-topright и прочих нет
Довольно обидно, что и сайты используют проприетарные свойства, вместо CSS3.
Может Вы будете одним из первых?
[Ответить]
Как сделать наклонный градиент, заданный в градусах, для webkit, как здесь? emfire.ru
[Ответить]
А пробовал ли кто-то сделать вложенный div с overflow:hidded?
И вся конструкция разваливается...
Только Хром правильно рисует (тест на Ubuntu).
[Ответить]
[...] примеры нестандартного оформления можно посмотреть здесь. Удачи Вам в творчестве!С уважением, Master Понравилась [...]
Опера 10.62, а углы прямые?!
[Ответить]
А вот в опере у тебя квадратное
себе сделал, на сайте carkam.ru так как нписано ниже 
.
.
border-radius: 12px;
-moz-border-radius: 12px;
первая строка не работает в фаерфоксе, а использование только второй, дает правильный результат только в ФФ а в Опере слишком сильно закругляет. А если написать обе строки сразу, то в обеих браузерах отображает правильно. И лишь интернет эксплорер курит в сторонке.
[Ответить]
Очень полезно! Спасибо!
[Ответить]
В статистиці використання браузерів, на малюнку, допущено помилку.
Safari, а не Saphari
[Ответить]
alexnjoy ответил:
Декабрь 14th, 2010 в 16:18
знаю) уже писали
[Ответить]
Андрій ответил:
Декабрь 14th, 2010 в 17:02
Але стаття хороша, Дякую!
[Ответить]
Я на своих проектах верстаю по следующему принципу:
— сначала делаю каркас, воспринимаемый всеми популярными браузерами. То есть, чтобы сохранялась читабельность сайта.
— потом добавляю всякие оформительские штуки, в том числе CSS 3. Если какой-то браузер это не понимает, это уже проблема пользователя. Хочешь нормального отображения сайта? Пользуйся нормальным браузером. А если пользуешься недоделанным браузером, смотри на недоделанную верстку.
[Ответить]
Вот интересный трабл с border-radius , W3C CSS Validaor не принимает, выкидывает в ошибку: Ошибка разбора [empty string] (причем без префикса)
[Ответить]
А скажем усложнить чуток задачу, если к примеру нужно не блок, а картинку скруглить, уже готовый рисунок. Есть варианты как сделать?
[Ответить]
alexnjoy ответил:
Март 27th, 2011 в 11:11
Да точно также как и с блоками, но применяете стили к картинкам — img
[Ответить]
У меня в хроме и опере, если у блока стоит свойство border (т.е. если скругление применять не к background, а к border), сами уголки почти не видны, на месте скруглений пусто, что-нибудь с этим можно сделать?
[Ответить]
alexnjoy ответил:
Май 7th, 2011 в 0:08
если честно, то я не понял в чем проблема. Не могли бы вы дать мне ссылку на ваш сайт, что бы я посмотрел?
[Ответить]
Надежда ответил:
Май 7th, 2011 в 14:03
да, вот ссылка nadena.ru/pal/, нужно смотреть в опере или хроме, так как в остальных нормально, трабл в картинках с серым бордером скруглённым, сами углы почти не видны
[Ответить]
Надежда ответил:
Декабрь 1st, 2011 в 13:20
я уже разобралась с этим, так что вопрос снят
Спасибо за примеры, очень доходчиво и красиво! )
[Ответить]
Спасибо за урок. помог! А еще подскажите как рамку сделать?
[Ответить]
Что-то я не понял — все пишут что ие9 воспринимает border-radius, а у меня он все div-ы квадратными выводит (см сайт navseh.ru).
Вот простой код:
Пример
Единственно кто его правильно отображает так это Опера (10,50 и выше). В ие9 квадратное все. В чем дело?
[Ответить]
Код вырезали (( убрал скобки угловые, заменил на [
[div style = 'position: absolute; left:100px; top:100px; width:100px; height:100px; border:2px solid blue; -border-radius:10px;]
Пример
[/div ]
[Ответить]
Msserher ответил:
Сентябрь 19th, 2011 в 12:48
Разобрался, оказывается надо доктайп указать, для html5 указал в самом начале файла и все заработало в ие9
[Ответить]
Msserher ответил:
Сентябрь 19th, 2011 в 12:49
Вот что надо указать (в угловых скобках есно)
!DOCTYPE html
[Ответить]