border-radius

Поддержка браузерами


12.0+	9.0+	4.0+	5.0+	10.5+	5.0+

Описание

CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:

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

border-radius: 5px 10px 15px 20px; (4 значения) Верхний левый – 5px Верхний правый – 10px Нижний правый – 15px Нижний левый – 20px
border-radius: 10px 20px 15px; (3 значения) Верхний левый – 10px Верхний правый и нижний левый – 20px Нижний-правый – 15px
border-radius: 15px 5px; (2 значения) Верхний левый и нижний правый – 15px Верхний правый и нижний левый – 5px
border-radius: 13px; (1 значение) Радиус для всех четырёх углов – 13px

Овальные скругления

CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:

Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ /:

border-radius: 50px / 30px;

Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.

Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.

Пример с овальными скруглениями:

border-radius: 55px 45px 40px / 35px 20px;
1. Верхний левый – 55px / 35px
2. Верхний правый и нижний левый – 45px / 20px
3. Нижний правый – 40px / 35px

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

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

Значение по умолчанию:	0
Применяется:	ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse;
Анимируется:	да
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.borderRadius="5px"

Синтаксис

border-radius: [величина | проценты]{1,4} [ / [величина | проценты]{1,4} ]

Значения свойства

Значение	Описание
величина	Величина радиуса указывается в единицах измерения, используемых в CSS.
%	Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:

border-radius:

Результат:

CSS Код:

div {
border-radius: 100px;
}

Кликните на любое значение свойства, чтобы увидеть результат