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: 0;
}

Пример

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры ?

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

Браузеры

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

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

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

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич