border-radius

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

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

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

Синтаксис

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Возможная рекомендация

Браузеры

 
Базовый синтаксис9121410.53514
Проценты912410.554
Эллиптические уголки912110.533.5
 
Базовый синтаксис12.11410.535
Проценты2.1410.55
Эллиптические уголки2.13.510.53

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

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

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