Создаем закруглённые уголки с помощью CSS 3

Original author: bloggingcss.com
  • Translation
image

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

Кроссбраузерная совместимость.


К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.

Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
<body>
<div id="box"></div>
</body>


В CSS зададим для него высоту, ширину и цвет фона:
#box {
width:590px;
height:100px;
background-color:#6B86A6; }


Добавляем свойство border-radius:


Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box {
-moz-border-radius: 20px;
}


Теперь все четыре угла будут иметь радиус 20px:
image

Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box {
-moz-border-radius:20px 40px;
}


image

Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box {
-moz-border-radius:10px 20px 30px 40px;
}


image

Объявляем свойство border-radius для каждого угла


Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:
  • moz-border-radius-topleft для верхнего левого угла;
  • moz-border-radius-topright для верхнего правго угла;
  • moz-border-radius-bottomright для нижнего правого угла;
  • moz-border-radius-bottomleft для нижнего левого угла;

image

Горизонтальный и вертикальный радиус


Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box {
-moz-border-radius-topleft: 30px 15px;
}

image

Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.

При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box {
-moz-border-radius: 30px / 15px;
}
#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}


image

Использование свойства border-radius в Safari и Chrome.


Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:
  • -webkit-border-top-left-radius для верхнего левого угла;
  • -webkit-border-top-right-radius для верхнего правого угла;
  • -webkit-border-bottom-right-radius для нижнего правого угла;
  • -webkit-border-bottom-left-radius для нижнего левого угла;

При использовании краткой записи необходимо иметь ввиду, что её можно использовать только когда значения для всех углов равны, если значения разные, то необходимо указывать свойства для каждого угла.

Этот код не будет работать в Safari и Chrome:
#box {
-webkit-border-radius: 10px 20px 30px 40px;
}


Правильный код будет выглядеть так:
#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 можно также указывать горизонтальный и вертикальный радиус:
#box {
-webkit-border-top-left-radius: 30px 15px;
}


При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box {
-webkit-border-radius: 30px 15px;
}


Примеры.
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 87

  • UFO just landed and posted this here
      +42
      где было?
      это не про IE забыли, это IE забыл про border-radius
      • UFO just landed and posted this here
          +2
          не понял к чему вы ведете, в этой статье всего лишь описаны новые возможности которые предоставляет CSS3,
          да, пока не все браузеры поддерживают это свойство, но никто и не заставляет вас сейчас его использовать, просто примите к сведению.
          • UFO just landed and posted this here
              +5
              А вам больше нравиться геморой из различных нынешних способов по закруглению??? Кроме разве что последней статьи с кружками.
                –2
                Увы, приходится гемороится ради тех 15% рынка, которых занимает IE 6.0. Заказчик, то бишь клиент прав, пока кризис и раскидываться клиентами нет возможности.
                  +2
                  а можно линк на статью с кружками?
                +2
                А зачем переучивать? Нужно просто выучить новшество! Когда все браузеры перейдут на CSS3, все равно придется учить CSS3, и тогда сами заметите что верстка станет немного легче. Если вы считаете себя грамотным верстальщиком — вам придется выучить CSS3.
                  0
                  Я выучил HTML5 вот толку то…

                  Сейчас даже W3C должно слушать как дует ветер от мелкомягких. Знаем недавние комменты по поводу отказа от ряда тегов, что объявлялись в новой редакции хтмла…
                  +1
                  Ну вы и кадр

                  [простите, неудержался]
                    +1
                    Ну тогда ждите, пока заказчики начнут выбирать для исполнения проектов тех, кто захотел переучится на CSS3.
                0
                какая разница? вы из тех веб-мастеров, которые оптимизируют сайт под один свой любимый браузер, забывая про остальные?
                я сегодня 4 часа провозился из-за того, что одна из надписей в дизайне блога налезала на другую. причем только в Google Chrome, а в IE6-8, FF2-3.5, Opera все нормально.
                после этих танцев с бубнами читать про то, как круто на css3 будет делать закругленные кнопочки смешно. ближайшие годы ни один веб-мастер в своем уме не будет использовать фишки, работающие лишь на малой части браузеров.
                  +5
                  Ну и зря.
                    +1
                    Далеко не обязательно. Можно продублировать функционал с рассчетом на css3. Причем с точки зрения клиента, если на странице over 9000 таких блоков использование css3 займет в разы меньше времени на рендер страницы чем такое же количество триков в самом коде. Минусом будет только то что придется добавить парочку условных css файлов либо использовать избирательные хаки
                      +2
                      мы уже используем, в IE смотрится чуть хуже, но не критично. А в последних проектах я выкидывал для ie6 надпись, типа браузер устаревший установите новый, и с сылки на opera, fx, chrome. Пока жалоб ни от заказчиков ни от клиентов не поступало. Если юзер просто закрывает окошко то видит сайт с непрозрачными png'шками и кое где поползшим дизайном. Недавно видел более радикальный вариант: для ie на белой странице посередине: «Ваш браузер гавно» :)
                        0
                        Более того, уже используют.
                      0
                      в данном случае я бы сказал: IE забыл про border-radius :)
                      тут уж особо не ппишель для осла есть 2 варианта:
                      1. продолжать использовать изображения
                      2. забивать на него, но делать с оглядкой на будующе и включать в ксс свойство border-radius в надежде на то, что когда-нибудь он будет его поддерживать
                        –3
                        а как же Opera?
                        • UFO just landed and posted this here
                            +3
                            вы бы хоть поняли о чем статья…
                            • UFO just landed and posted this here
                                +7
                                Вам надо в нике вторую букву на русскую «у » поменять
                            0
                            опера, на сколько мне известно, пока не поддерживает это свойство, к сожалению. но не думаю, что это на долго
                              0
                              там в начале написано по поводу Оперы
                                0
                                извиняюсь, не заметил
                        • UFO just landed and posted this here
                            +7
                            You are an idiot © House
                            0
                            webkit уже поддерживает «обычный» border-radius, без приставки -webkit. я гарантирую это (с)
                            • UFO just landed and posted this here
                                +2
                                Вот уж точно. Выглядят жутковато.
                                  0
                                  Во всех webkit-based жуткое закругление. Как увидел свой сайт в arora — так и сел.
                                  • UFO just landed and posted this here
                                      +2
                                      Виноват, сафари не видел. Впредь, буду аккуратнее с обобщениями :-)
                                        +2
                                        Ну в плане скруглений/закруглений/сглаживаний/приятности-содержимого-глазу Сафари вообще заруливает все и вся :) Еле-еле перешел с него на Chrome в свое время из за этого.
                                      0
                                      у хрома вообще со сглаживанием некоторые проблемы, что странно ввиду что у safari всё нормально
                                    +6
                                    -khtml-border-radius для Konqueror
                                      0
                                      Не понимаю, почему бы всем браузерам уже не ввести border-radius без всяких суффиксов -ххх…
                                        0
                                        потому что все браузеры придерживаются стандартов, а border-radius — это стандарт, который еще не принят ) приходится делать «по-своему»
                                          +1
                                          Это еще не стандарт, и если заметили в статье указан различный синтаксис. Вот как утвердят стандарт, так и станет один синтаксис, без префиксов. Я например использую border-radius в простейших вариантах(когда скруглены все углы) примерно так:
                                          border-radius: 10px;
                                          -moz-border-radius: 10px;
                                          -webkit-border-radius: 10px;
                                          
                                        • UFO just landed and posted this here
                                          0
                                          В Opera 10 не будет border-radius.

                                          Скруглить углы у таблицы можно только с помощью ещё одной обёртки, overflow: hidden и только в webkit. Отличный сферический конь в вакууме.
                                            0
                                            Да, но скоро будет:

                                            border-radius will be supported from Presto 2.3 onward (ie after Opera 10, which is Presto 2.2 based).

                                            dev.opera.com/forums/topic/258986?t=1249405103&page=1#comment2936734
                                              0
                                              Скоро? Вы себе представляете цикл разработки новой версии браузера? Сколько времени прошло между выпуском 9.5 и выпуском 10.0? Посмотрите по релизам предыдущих версий. Это минимум год.

                                              Оперцы «переизобретают веб» делая Unite.
                                                0
                                                Они и с mobile версией любят затягивать, для S60 так и не появилась 9.х, хотя обещания начались еще (!) полтора года назад. Извините за оффтоп :)
                                                  0
                                                  Цикл разработки новой версии браузера не зависит от включения в ядро поддержки border-radius. В финальной 10-й версии и правда, скорее всего, не будет новой версии Presto, но затягивать выпуск того, что очень востребованно у разработчиков тоже никто не собирается.
                                                    0
                                                    Ядро же самопо себе не используется. Используется браузер с ним.

                                                    Если новая версия Престо будет в 10.x это тоже не сильно залечит. Будут пользователи (и их будет много), кто будет видеть на 10.0 и не обновляться.
                                                0
                                                Не сказал бы, что это большая радость, к сожалению.
                                                  0
                                                  Я и не говорю, что радость. Горечь, скорее.
                                                    0
                                                    Естественно. Но посмотрим, когда же CSS3 станет стандартом.
                                                      0
                                                      HTML4 стал стандартом в 1999 году. Его до сих пор ни один браузер не поддерживает в полном объёме.
                                                +2
                                                удивляюсь с этих постов, ну да, css 3, здорово, но какие в задницу скругленные уголки через border-radius если браузер от клёвых пацанов не понимает даже примитивный селектор TAG > TAG?
                                                Станет задача, реализовать в макете блоки со скругленными уголками — один фиг будете вырезать из картинок и подставлять фоном. Или же проявите инициативу и напишите так, но после первого вопроса заказчика «почему не везде работает», увы, придется делать по старинке.

                                                PS: предлагаю забить на кроссбраузерность и пользоваться всем из CSS3, множественный бекграунды, тени — все очень здорово, но ближайшие 3-4- года мы обречены все делать «по старинке»
                                                  +2
                                                  Иногда скругленные уголки — не необходимость, а плюс в современных браузерах. Пользователи ИЕ и Оперы видят обычные прямоугольники, пользователи Фаерфокса, Сафари и Хрома — прямоугольники со слегка скругленными уголками. Все счастливы.
                                                  Пример — меню на smashingmagazine.com
                                                  0
                                                  Достаточно было привести соответствующие css-коды для каждого из браузеров и ссылки на решения для IE :)
                                                    +1
                                                    Статья не про то как сделать закругленные углы на CSS2 с решениями под каждый браузер, а про свойство border-radius в CSS3, статей по решениям закругленных углов море!
                                                  • UFO just landed and posted this here
                                                      0
                                                      не понял… если под каждый браузер свой способ… это что получается? опять исчезает поддержка одного стандарта. Почему бы всем не остановится просто на border-radius без приставок.
                                                        0
                                                        До тех пор, пока это свойство не будет реализовано полностью в соответствии со стандартом / находится в процессе тестирования — оно будет с приставкой.
                                                        Другое дело, что этот обзор сейчас не имеет смысла, поскольку по сути рассматривается не сам бордер-радиус, а его специфические реализации. Делать цсс под каждый браузер (иногда со своим синтаксисом) — неоправданно.
                                                        К сожалению, пока приходится зачастую отказываться от css-only решений, и прибегать к js.
                                                          0
                                                          А, ну теперь ясно. Спасибо.
                                                        0
                                                        спасибо.
                                                        как-то самому недосуг всё статейку наклепать, а тут уже готово всё.
                                                        • UFO just landed and posted this here
                                                          +1
                                                          До тех пор пока border-radius поддерживают не все браузеры, отличным решением является rocon от Сергея Чикуёнка.
                                                            0
                                                            Далеко не единственное, но вполне удобное решение на JS.
                                                            0
                                                            удобно, конечно. но пока рано: imagebin.ca/view/Yah7Uu26.html
                                                              –1
                                                              когда всё будет поддерживать CSS3 круглые рамки выйдут из моды наконец то! )
                                                              • UFO just landed and posted this here
                                                                • UFO just landed and posted this here
                                                                +2
                                                                Спасибо, мне понравилась статья. Просто, наглядно и доступно. Для меня CSS3 по прежнему остаётся неким далёким и мифическим зверем, выше правильно писали — очень сложно отказаться от отладки для IE6, потому что работать должно и в нём, но помечтать о тех временах, когда не нужны будут стилистические изъёбы, вида картинок подложки, или тех же JS Rounded Corners, хорошо.

                                                                Слегка повеселило, правда, фраза про то, что это одно из самых ожидаемых свойств в CSS3. Не уверена, что это так, во всяком случае я от CSS3 ожидала, помимо этого, кучи других вещей. И мультипл фон для меня важнее на порядок. )

                                                                Но всё равно спасибо, я оценила как текст, так и уровень иллюстративности.
                                                                  0
                                                                  А вот интересно как прозрачность углов будет работать на неоднородном фоне, например, на фоне цветного рисунка.
                                                                  К сожалению, это стало небольшой проблемой однажды. Использовать jquery-плагин для закругленных углов, и несколько расстроился, когда увидел, что это нормально работает только на однородном фоне. В противном случае — нет. Пришлось вырезать картинками (хотя все равно пришлось бы вырезать, потому что потом увидел что помимо закругленных углов еще и тени есть).
                                                                  Говоря про тот же плагин от jquery. Всем хорош, к примеру, но нет поддержки закругленного border'а :( Зато несомненно главный плюс — работа во всех нужных браузерах =)
                                                                    +1
                                                                    Про горизонтальный и вертикальный радиус не знал, спасибо)
                                                                      0
                                                                      it works!!!
                                                                      Wheeeeee!!! ^____^
                                                                        0
                                                                        поправь «обявляется „
                                                                          0
                                                                          поправил, спасибо
                                                                          +1
                                                                          Недавно встречал какой-то htc, реализующий закруглённые уголки для IE. В принципе можно использовать border-radius, и костыль для ИЕ. Ну или как вариант — забить на ИЕ, контент всё равно нормально будет отображаться, пусть и без закруглений уголков.
                                                                            –1
                                                                            вот эти ваши "-moz-border-radius" и т.д. валидацию не проходят ((

                                                                            Кто что думает по этому поводу?
                                                                              +1
                                                                              Конечно, это ведь еще не принятый стандарт. Что делать — да ничего :) не проходят и ладно. 100% валидность не должна быть самоцелью, главное чтобы сайт работал и отображался как надо, а пара ошибок валидации такого плана — это незначительная мелочь.
                                                                              0
                                                                              Как вы думаете, какой должен быть объективный порог браузеров, недостаточно поддерживающих CSS3, чтобы его начали применять?
                                                                                +1
                                                                                Поправочка: из статьи по свойству -moz-border-radius на developer.mozilla.org следует, что данное свойство поддерживается начиная с Firefox 1.0 (а не с третьей версии как указано в статье). Сам же стал использовать это свойство (там где это не критично) еще с приходом Firefox 2.0 (и честно думал до сих пор, что именно в нем оно появилось). Значительное изменение можно заметить в Firefox 3.0, когда закругленные углы стали со сглаживанием (добавили antialiasing). Сглаживание так же есть в Safari, но отсутствует в Chrome.
                                                                                  0
                                                                                  И забыл добавить, что эллипстические углы в Firefox появились только с версии 3.5. При этом можно заметить, что в webkit (Safari/Chrome) и в gecko (Firefox) используется разный синтаксис для эллипстических углов. В данном случае gecko поступает правильней, так как соответсвует текущему состоянию черновика css3 относительно border-radius.
                                                                                  0
                                                                                  Есть ли вариант для IE7?
                                                                                    0
                                                                                    с помощью только CSS сделать не получится
                                                                                    0
                                                                                    Тест:
                                                                                    родительский блок с скругленными углами (до круга) и оверфлоу: хидден, дочерний блок бОльшего размера вылезает за круглые границы. Проверено в:

                                                                                    Opera
                                                                                    Версия: 10.61
                                                                                    Сборка: 6430
                                                                                    Платформа: Linux
                                                                                    Система: x86_64, 2.6.32-24-generic

                                                                                    FireFox 3.6.8

                                                                                    Работает корректно в:
                                                                                    Chromium 6.0.487.0 (55176) Ubuntu 10.04

                                                                                    Only users with full accounts can post comments. Log in, please.