outline-style
=============

CSS-свойство **`outline-style`** задаёт стиль обводки элемента. Обводка — линия вокруг элемента за пределами рамки (`border`).

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

При определении внешнего вида обводки зачастую удобнее всего воспользоваться сокращённым свойством `outline`.

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


```css
/\* Ключевые слова \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/\* Глобальные значения \*/
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;
```


Свойство `outline-style` может быть иметь одно из перечисленных ниже значений.

### Значения

`auto`

Оставляет стиль обводки на усмотрение браузера.

`none`

Отсутствие обводки. Значение `outline-width` в таком случае будет `0`.

`dotted`

Обводка в виде линии из точек.

`dashed`

Обводка в виде пунктирной линии.

`solid`

Обводка в виде сплошной линии.

`double`

Обводка из двух сплошных линий. Значение `outline-width` — это сумма двух линий и расстояния между ними.

`groove`

Обводка выглядит так, словно она выгравирована на странице.

`ridge`

Противоположность `groove`: обводка полностью объёмная, словно выдавлена из страницы.

`inset`

Обводка выглядит так, словно блок погружается в страницу.

`outset`

Противоположность `inset`: обводка выглядит так, словно приподнимает блок на странице.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | by computed value type |

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

outline-style =   
  auto                  | (en-US)  
  <outline-line-style>    
  
```

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

### с

Значение `auto` стилизует обводку согласно спецификации: "как правило, это либо стандартный стиль для данной платформы, либо что-то более разнообразное, как например, яркая обводка с закруглёнными краями".

#### HTML


```html
<div>
  <p class="auto">Демонстрация обводки</p>
</div>
```


#### CSS


```css
.auto {
  outline-style: auto; /\* То же самое, что и "outline: auto" \*/
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


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

### Стиль обводки из линий в виде штрихов и точек

#### HTML


```html
<div>
  <div class="dotted">
    <p class="dashed">Демонстрация обводки</p>
  </div>
</div>
```


#### CSS


```css
.dotted {
  outline-style: dotted; /\* То же самое, что и "outline: dotted" \*/
}
.dashed {
  outline-style: dashed;
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


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

### Стиль обводки из сплошной и двойной линий

#### HTML


```html
<div>
  <div class="solid">
    <p class="double">Демонстрация обводки</p>
  </div>
</div>
```


#### CSS


```css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


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

### Применение стилей обводки groove и ridge

#### HTML


```html
<div>
  <div class="groove">
    <p class="ridge">Демонстрация обводки</p>
  </div>
</div>
```


#### CSS


```css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


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

### Применение стилей обводки inset и outset

#### HTML


```html
<div>
  <div class="inset">
    <p class="outset">Демонстрация обводки</p>
  </div>
</div>
```


#### CSS


```css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


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

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-style |

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

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

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

* `outline`
* `outline-color`
* `outline-width`