border-radius
=============

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

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

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

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

Свойство `border-radius` не применяется к элементам таблицы, когда свойство `border-collapse` (en-US) имеет значение `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} (en-US) [ (en-US) / <length-percentage [0,∞]>{1,4} (en-US) ] (en-US)? (en-US)    
  
<length-percentage> =   
  <length>      | (en-US)  
  <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: http://jsfiddle.net/Tripad/qnGKj/2/
* Пример 2: http://jsfiddle.net/Tripad/qnGKj/3/
* Пример 3: http://jsfiddle.net/Tripad/qnGKj/4/
* Пример 4: http://jsfiddle.net/Tripad/qnGKj/5/
* Пример 5: http://jsfiddle.net/Tripad/qnGKj/6/
Спецификации
------------

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

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