border-bottom
=============

Сокращённое свойство CSS **`border-bottom`** описывает нижнюю границу элемента border. Оно устанавливает значения `border-bottom-width` (en-US), `border-bottom-style` (en-US) и `border-bottom-color` (en-US).

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

Как и все сокращённые свойства, `border-bottom` устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...


```css
border-bottom-style: dotted;
border-bottom: thick green;
```


... это то же самое, что ...


```css
border-bottom-style: dotted;
border-bottom: none thick green;
```


... и значение `border-bottom-style` (en-US), указанное перед `border-bottom` игнорируется. Поскольку значением по умолчанию для `border-bottom-style` (en-US) является `none`, то без указания `border-style` граница не будет показана.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `border-bottom-color` (en-US)
* `border-bottom-style` (en-US)
* `border-bottom-width` (en-US)
Syntax
------


```css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;
```


The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

### Values

`<br-width>`

See `border-bottom-width` (en-US).

`<br-style>`

See `border-bottom-style` (en-US).

`<color>`

See `border-bottom-color` (en-US).

Formal definition
-----------------

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

Formal syntax
-------------
```

border-bottom =   
  <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    
  
```

Examples
--------

### Applying a bottom border

#### HTML


```html
<div>This box has a border on the bottom side.</div>
```


#### CSS


```css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### Results

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

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

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

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

See also
--------

* `border`
* `border-block` (en-US)
* `outline`