border
======

Свойство CSS **`border`** это универсальное свойство для указания всех персональных свойств границ за раз: `border-width`, `border-style` (en-US), и `border-color` (en-US).

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

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, `border` не может быть использован для указания пользовательского значения `border-image` (en-US), но вместо этого устанавливает его в начальное значение, т.е. `none`.


```css
border: 1px;
border: 2px dotted;
border: medium dashed green;
```


**Примечание:** Рекомендуется использовать `border`, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства `border-width`, `border-style` (en-US), и `border-color` (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, `border` принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

Синтаксис
---------

Свойство `border` указывается используя одно или более значений `<br-width>`, `<br-style>`, и `<color>` указанных ниже.

### Значения

`<br-width>`

Толщина границ. По умолчанию `medium` если отсутствует. Больше информации `border-width`.

`<br-style>`

Стиль линии границ. По умолчанию `none` если отсутствует. Больше информации `border-style` (en-US).

`<color>`

Цвет границ. По умолчанию принимает значение свойства элементов `color` (en-US). Больше информации `border-color` (en-US).

### Обычный синтаксис
```

border =   
  <line-width>  || (en-US)  
  <line-style>  || (en-US)  
  <color>         
  
<line-width> =   
  <length [0,∞]>  | (en-US)  
  thin            | (en-US)  
  medium          | (en-US)  
  thick             
  
<line-style> =   
  none    | (en-US)  
  hidden  | (en-US)  
  dotted  | (en-US)  
  dashed  | (en-US)  
  solid   | (en-US)  
  double  | (en-US)  
  groove  | (en-US)  
  ridge   | (en-US)  
  inset   | (en-US)  
  outset    
  
```

Примеры
-------

### HTML


```html
<div class="fun-border">Look at my borders.</div>
<p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!</p>
<style contenteditable>
 .fun-border {
 border: 2px solid red;
 }
</style>
```

### CSS


```css
style {
  display: block;
  border: 1px dashed black;
}
```

### Результат

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

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `border-width`: как и у каждого из подсвойств этого свойства:
    + `border-top-width` (en-US): `medium`
    + `border-right-width` (en-US): `medium`
    + `border-bottom-width` (en-US): `medium`
    + `border-left-width` (en-US): `medium`
* `border-style` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-top-style` (en-US): `none`
    + `border-right-style` (en-US): `none`
    + `border-bottom-style` (en-US): `none`
    + `border-left-style` (en-US): `none`
* `border-color` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-top-color` (en-US): `currentcolor`
    + `border-right-color` (en-US): `currentcolor`
    + `border-bottom-color` (en-US): `currentcolor`
    + `border-left-color` (en-US): `currentcolor`
 |
| Применяется к | все элементы. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `border-width`: как и у каждого из подсвойств этого свойства:
    + `border-bottom-width` (en-US): абсолютная длина или `0`, если `border-bottom-style` (en-US) - `none` или `hidden`
    + `border-left-width` (en-US): абсолютная длина или `0`, если `border-left-style` (en-US) - `none` или `hidden`
    + `border-right-width` (en-US): абсолютная длина или `0`, если `border-right-style` (en-US) - `none` или `hidden`
    + `border-top-width` (en-US): абсолютная длина или `0`, если `border-top-style` (en-US) - `none` или `hidden`
* `border-style` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-bottom-style` (en-US): как указано
    + `border-left-style` (en-US): как указано
    + `border-right-style` (en-US): как указано
    + `border-top-style` (en-US): как указано
* `border-color` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-bottom-color` (en-US): вычисленный цвет
    + `border-left-color` (en-US): вычисленный цвет
    + `border-right-color` (en-US): вычисленный цвет
    + `border-top-color` (en-US): вычисленный цвет
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `border-color` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-bottom-color` (en-US): цвет
    + `border-left-color` (en-US): цвет
    + `border-right-color` (en-US): цвет
    + `border-top-color` (en-US): цвет
* `border-style` (en-US): discrete
* `border-width`: как и у каждого из подсвойств этого свойства:
    + `border-bottom-width` (en-US): длина
    + `border-left-width` (en-US): длина
    + `border-right-width` (en-US): длина
    + `border-top-width` (en-US): длина
 |

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

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

Также смотрите
--------------

* `border-radius`-related CSS properties: `border-top-left-radius` (en-US), `border-top-right-radius` (en-US), `border-bottom-right-radius` (en-US), `border-bottom-left-radius` (en-US)