border-width
============

Summary
-------

CSS-свойство `border-width` определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства `border`.

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `border-top-width` (en-US): `medium`
* `border-right-width` (en-US): `medium`
* `border-bottom-width` (en-US): `medium`
* `border-left-width` (en-US): `medium`
 |
| Применяется к | все элементы. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `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`
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `border-bottom-width` (en-US): длина
* `border-left-width` (en-US): длина
* `border-right-width` (en-US): длина
* `border-top-width` (en-US): длина
 |

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

Общий синтаксис (en-US): 
```

border-width =   
  <line-width>{1,4} (en-US)    
  
<line-width> =   
  <length [0,∞]>  | (en-US)  
  thin            | (en-US)  
  medium          | (en-US)  
  thick             
  
```



```css
border-width: ширина                  /\* Одно значение \*/
border-width: вертикальная горизонтальная    /\* Два значения \*/
border-width: верх горизонтальная основание    /\* Три значения \*/
border-width: верх право основание лево  /\* Четыре значения \*/

border-width: inherit /\* Родительское значение \*/
```

### Values

`<br-width>`

Is either a non-negative explicit `<length>` value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:

* `thin`
* `medium`
* `thick`

**Примечание:** The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the `thin ≤ medium ≤ thick` inequality and that the values are constant on a single document.

`inherit`

Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Examples
--------

### A mix of values and lengths

#### HTML


```html
<p id="sval">one value: 6px wide border on all 4 sides</p>
<p id="bival">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="treval">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="fourval">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  right
</p>
```


#### CSS


```css
#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```


#### Result

Specifications
--------------

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

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

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

See also
--------

* The border-related shorthand properties: `border`, `border-style` (en-US), `border-color` (en-US)
* The border-width-related properties: `border-bottom-width` (en-US), `border-left-width` (en-US), `border-right-width` (en-US), `border-top-width` (en-US)