border-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Интерактивный пример

Это свойство является короткой записью для четырёх свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius иborder-bottom-left-radius.

Скругление применяется ко всему background, даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip.

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse имеет значение collapse.

Примечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

Синтаксис

css

/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */
/* Скругление применяется ко всем четырём углам */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* Синтаксис из двух радиусов также может применяться ко всем четырём углам */
/* (первые значения радиуса) /радиус */
border-radius: 10px 5% / 20px;

/* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Глобальные значения */
border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius может быть задано как:

одно, два, три или четыре значения <length> или <percentage>. Используется для задания обычного радиуса углов.
одна, две, три или четыре пары значений <length> or <percentage>, разделённые "/". Используется для задания эллиптического скругления.

Значения

radius		`<length>` или `<percentage>` устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).
top-left-and-bottom-right		`<length>` или `<percentage>` устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями.
top-right-and-bottom-left		`<length>` или `<percentage>` устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.
top-left		`<length>` или `<percentage>` устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
top-right		`<length>` или `<percentage>` устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.
bottom-right		`<length>` или `<percentage>` устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
bottom-left		`<length>` или `<percentage>` устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.

<length>: Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
<percentage>: Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.

Например:

css

border-radius: 1em/5em;

/* ... эквивалентно этому: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

css

border-radius: 4px 3px 6px / 2px 4px;

/* ... эквивалентно этому: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

Формальный синтаксис

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

<pre id="example-1">
border: solid 10px;
border-radius: 10px 40px 40px 10px;
  </pre
>
<pre id="example-2">
border: groove 1em red;
border-radius: 2em;
  </pre
>
<pre id="example-3">
background: gold;
border: ridge gold;
border-radius: 13em/3em;
  </pre
>
<pre id="example-4">
border: none;
border-radius: 40px 10px;
background: gold;
  </pre
>
<pre id="example-5">
border: none;
border-radius: 50%;
background: burlywood;
  </pre
>
<pre id="example-6">
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
  </pre
>
<pre id="example-7">
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
  </pre
>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

Живые примеры

Пример 1: https://jsfiddle.net/Tripad/qnGKj/2/
Пример 2: https://jsfiddle.net/Tripad/qnGKj/3/
Пример 3: https://jsfiddle.net/Tripad/qnGKj/4/
Пример 4: https://jsfiddle.net/Tripad/qnGKj/5/
Пример 5: https://jsfiddle.net/Tripad/qnGKj/6/

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

Specification
CSS Backgrounds and Borders Module Level 3 # border-radius

Начальное значение	как и у каждого из подсвойств этого свойства: `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
Применяется к	все элементы, но браузеры не применяют к элементам `table` и `inline-table`, когда `border-collapse`:`collapse`. Поведение на внутритабличных элементах не определено.. Это также применяется к `::first-letter`.
Наследуется	нет
Проценты	относятся к соответствующему размеру границы элемента
Обработка значения	как и у каждого из подсвойств этого свойства: `border-bottom-left-radius`: две абсолютных `<length>` или `<percentage>` `border-bottom-right-radius`: две абсолютных `<length>` или `<percentage>` `border-top-left-radius`: две абсолютных `<length>` или `<percentage>` `border-top-right-radius`: две абсолютных `<length>` или `<percentage>`
Animation type	как и у каждого из подсвойств этого свойства: `border-top-left-radius`: длина, проценты или calc(); `border-top-right-radius`: длина, проценты или calc(); `border-bottom-right-radius`: длина, проценты или calc(); `border-bottom-left-radius`: длина, проценты или calc();

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Относящиеся к Border-radius CSS-свойства: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius