border-radius

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Применяется	Ко всем элементам, за исключением таблиц с border-collapse: collapse
Анимируется	Да

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значений	Результат
1	Радиус указывается для всех четырёх уголков.
2	Первое значение задаёт радиус верхнего левого и нижнего правого уголков, второе значение — верхнего правого и нижнего левого уголков.
3	Первое значение устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого уголков, а третье — для нижнего правого уголка.
4	По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголков.

В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.

Радиус скругления для создания разных типов уголков

Рис. 1. Радиус скругления для создания разных типов уголков

Песочница

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

div {
  background: #e4efc7;
  border: 1px solid #333;
  padding: 10px;
  border-radius: {{ playgroundValue }}px;
}

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style> .radius { background: #f0f0f0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 15px; /* Поля вокруг текста */ margin-bottom: 10px; /* Отступ снизу */ } </style> </head> <body> <div style="border-radius: 50px 0 0 50px;" class="radius"> border-radius: 50px 0 0 50px; </div> <div style="border-radius: 40px 10px" class="radius"> border-radius: 40px 10px; </div> <div style="border-radius: 10em/1em;" class="radius"> border-radius: 13em/3em; </div> <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius"> border-radius: 13em 0.5em/1em 0.5em; </div> <div style="border-radius: 8px;" class="radius"> border-radius: 8px; </div> </body> </html>

Результат данного примера показан на рис. 2.

Радиусы скругления

Рис. 2. Радиусы скругления

Объектная модель

Объект.style.borderRadius

Примечание

Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют свойство -webkit-border-radius.

Firefox до версии 4.0 использует свойство -moz-border-radius.

Спецификация

Спецификация	Статус
CSS Backgrounds and Borders Module Level 3	Возможная рекомендация

Браузеры


Базовый синтаксис	9	12	1	4	10.5	3	5	1	4
Проценты	9	12	4		10.5	5		4
Эллиптические уголки	9	12	1		10.5	3		3.5


Базовый синтаксис	1	2.1	1	4	10.5	3	5
Проценты	2.1		4		10.5	5
Эллиптические уголки	2.1		3.5		10.5	3

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.