Мёртвый блог живого человека

SEO-оптимизация, манимейкинг, веб-разработка

Border radius: создаём закруглённые углы с помощью CSS

Замечательное свойство CSS3 border-raduis позволяет легко создавать закруглённые углы без использования изображений или лишних div тэгов. Это одно из полезнейших и обсуждаемых CSS3 свойств.

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

Приведу простой пример:

Бокс с закруглёнными углами, корректно отображающийся в Firefox, Safari/Chrome, Opera и IE9.

В теории, код для данного примера очень простой:

#example1 {
  border-radius: 15px;
}

Однако, не всё так просто. Для совместимости с Firefox, нужно использовать префикс -moz- (об этом читай секцию поддержки браузеров, moz border radius):

#example1 {
  -moz-border-radius: 15px;
  border-radius: 15px;



Как это работает

Существует два способа. Закруглённые углы можно создавать индивидуально для каждого угла, используя свойство border-*-radius (border-bottom-left-radius, border-top-left-radius, и т.д.), либо используя более короткое свойство border-radius.

Давайте для начала рассмотрим как использовать свойство для создания индивидуальных углов border-*-radius, а после разберём короткий аналог border-radius.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

В качестве радиуса можно указать любое возможное для CSS значение (px, cm, in, em и др.), а также проценты (в этом случае радиус скругления считается от ширины блока).

В качестве радиуса можно указать любое возможное для CSS значение (px, cm, in, em и др.), а также проценты (в этом случае радиус скругления считается от ширины блока).

Синтаксис:

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

Пример:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали.

Если указано всего одно значение, то оно определяет как горизонтальный так и вертикальный радиус.

На рисунке отображено несколько примеров разных значений и соответствующих им углов:

Если какое-либо значение будет равно нулю, то угол будет квадратный, а не круглый.

border-radius

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

Синтаксис:

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Пример:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

Первый набор значений (1-4) определяет горизонтальные радиусы для всех четырёх углов. Опциональный второй набор значений, указаный после слеша, определяет вертикальные радиусы для всех четырёх углов. Если указан только один набор значений, то он используется одинаково для определения вертикальных и горизонтальных углов.

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

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

В настоящее время Opera (версия 10,5 и старше), Safari (версия 5 и старше) Chrome (версия 5 и старше) поддерживают как border-radius, так и индивидуальные свойства border-*-radius, описанные в текущей спецификации W3C (хотя ещё есть много мелких ошибок и несогласований, таких как например границы перехода, использование процентов в длине и т.д.).

Mozilla Firefox (версия 1.0 и старше) поддерживает свойство border-radius с префиксом -moz- , хоть и есть некоторые расхождения между реализацией Mozilla и текущей спецификацией W3C (об этом ниже).

Последние версии браузера Firefox понимают border-radius без префикса -moz- .

Safari и Chrome (а так-же другие браузеры, основанные на движке webkit) поддерживают border-radius с префиксом -webkit- начиная с 3 версии (с 5 версии префикс уже не нужен), но так-же с некоторыми отклонениями от текущей спецификации.

Internet Explorer 9 абсолютно так-же поддерживает свойство border radius.

Префикс -moz-

Начиная с 1-ой версии, браузер Mozilla Firefox поддерживает свойство border-radius с префиксом -moz- . Однако, браузер только начиная с версии 3.5 стал использовать эллиптические углы, т.е. стал принимать два значения для угла, что-бы определить вертикальный и горизонтальный радиусы самостоятельно. До версии 3.5 браузер принимает только по одному значению для каждого угла, в результате чего одинаковы вертикальные и горизонтальные радиусы для угла одинаковы.

Синтаксис, как и написано в данной статье использует префикс -moz- . Основное различие только в названиях отдельных границ свойства border-*-radius, с префиксом -moz- всё выглядит немного по другому:

W3C Specification Mozilla Implementation
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

Метод с использованием процентов при реализации для браузера Mozilla немного отличается. Об этом можно подробней прочитать в Центре Разработчиков Mozilla здесь.

Кросс-браузерные примеры

Несколько базовых примеров, которые отлично работают в текущих версиях Firefox, Safari/Chrome, Opera и IE9:

A
B
C
D
E
F
#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

Примечание

Данная статья — это всего-лишь вольный перевод замечательной статьи Border-radius: create rounded corners with CSS!, которая естественно содержит ошибки и неточности перевода. Если таковые будут найдены — просьба сообщить мне (:



Оставить комментарий

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

Комментарии

  1. О неточностях: вот этот текст почему-то повторяется в статье 2 раза:

    В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты (в этом случае радиус скругления считается от ширины блока).

    Попутно есть вопрос насчёт капчи с человечками — как она в действии? Часто пробивается? Я вот столкнулся с тем, что начиная с апреля моя капча из 5-ти цифр уже не спасает — по 5-10 спамных камментов в сутки валит.

    VA:F [1.9.22_1171]
    +2
  2. Спасибо за развернутую статью. Давно искал как это делать.

    VA:F [1.9.22_1171]
    +1
  3. Firefox, Safari/Chrome, Opera и IE9:

    , это не кросс-браузерность :)

    Кросс-браузерность учитывает и IE8, IE7, IE6.

    Как быть с ними?

    Надо бы сделать пометку, что тут без «скриптов» уже никак.

    VA:F [1.9.22_1171]
    -2
  4. Давайте уже не будем разводить этот холивар насчёт ie старых версий ? Ну нравится вам ie 6 — верстайте сами под него и радуйтесь. Я в жизни больше никогда не стану поддерживать старые версии IE — это маразм какой-то.

    VN:F [1.9.22_1171]
    +4
  5. да кстати хороший вариант — я даже протестил его с тем что было у меня — и получилось что этот код выполняется быстрее — возьму на вооружение — спс!

    VA:F [1.9.22_1171]
    +4
  6. и забудьте про ИЕ 6 — всё нет его! )

    VA:F [1.9.22_1171]
    +1
  7. От души!!!!! Все перерыл, для mozilla инфы НОЛЬ, а для нее как раз и нужно! Благодарю!!!

    VA:F [1.9.22_1171]
    +4
  8. офигенная тема, и вообще бордер-радиус очень удобная штуковина ! как я раньше без неё жил)))

    VA:F [1.9.22_1171]
    -1
  9. Спасибо, очень помогло. Я у верстке не сильно, я больше php кодер.

    VA:F [1.9.22_1171]
    -1
  10. Спасибо

    VA:F [1.9.22_1171]
    +2
  11. Отличный материал. Кстати если кому интересно, можно почитать о психологическом восприятии и истории скругленных углов на netcoding.ru/articles/web... -ugli-v-dizayne/

    VA:F [1.9.22_1171]
    -1
  12. А у меня почему то только верхние углы скругляются, а нижние нет. В чем дело? И moz и webkit пишу.

    VA:F [1.9.22_1171]
    -1
  13. Ага, прописывать надо высоту блока обязательно, тогда скругляется.

    VA:F [1.9.22_1171]
    0
  14. Большое спасибо, шикарная развернутая статья :)

    VA:F [1.9.22_1171]
    -1
  15. А как для ie9 то сделать?

    VA:F [1.9.22_1171]
    -1
  16. Небольшое дополнение по скруглённым углам... Можно писать всё в одну строку...

    например: border-radius:3px 4px 6px 6px; -экономия кода...

    я юзаю сей генератор, который учитывает кроссбраузерность: finego.ru/tools/border-radius-generator

    VA:F [1.9.22_1171]
    +6


Подпишись и будь вкурсе всех новых тем на блоге — узнаешь много нового!