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

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

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

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

#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:

#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!, которая естественно содержит ошибки и неточности перевода. Если таковые будут найдены — просьба сообщить мне (: