# Свойство outline-style

Свойство `outline-style` задает стиль внешней рамки - границы, которая не занимает места.

## Синтаксис

`селектор { outline-style: значение; }`

## Значения

Значение | Описание
--- | ---
`solid` | Сплошная линия.
`dotted` | Рамка в виде точек.
`dashed` | Рамка в виде тире.
`ridge` | Рамка в виде выпуклой линии.
`double` | Рамка в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум `3px`.
`groove` | Вогнутая рамка.
`inset` | Вдавленная рамка.
`outset` | Выпуклая рамка.
`none` | Отсутствие границы.

Значение по умолчанию: `none`.

## Пример . Значение solid

`<div id="elem"></div>` `#elem { outline-width: 1px; outline-style: solid; outline-color: black; width: 300px; height: 100px; }`

:

## Пример . Значение dotted

`<div id="elem"></div>` `#elem { outline-width: 1px; outline-style: dotted; outline-color: black; width: 300px; height: 100px; }`

:

## Пример . Значение dashed

`<div id="elem"></div>` `#elem { outline-width: 1px; outline-style: dashed; outline-color: black; width: 300px; height: 100px; }`

:

## Пример . Значение ridge

`<div id="elem"></div>` `#elem { outline-width: 3px; outline-style: ridge; outline-color: black; width: 300px; height: 100px; }`

:

## Пример . Значение double

`<div id="elem"></div>` `#elem { outline-width: 3px; outline-style: double; outline-color: black; width: 300px; height: 100px; }`

:

## Пример . Значение groove

`<div id="elem"></div>` `#elem { outline-width: 3px; outline-style: groove; outline-color: black; width: 300px; height: 100px; }`

:

## Пример . Значение inset

`<div id="elem"></div>` `#elem { outline-width: 3px; outline-style: inset; outline-color: black; width: 300px; height: 100px; }`

:

## Пример . Значение outset

`<div id="elem"></div>` `#elem { outline-width: 3px; outline-style: outset; outline-color: black; width: 300px; height: 100px; }`

:

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

- свойство `outline-color`,
  которое задает цвет рамки
- свойство `outline-width`,
  которое задает толщину рамки
- свойство `outline`,
  которое является свойством сокращением для рамок
- свойство `outline-offset`,
  которое задает смещение рамки

← →
↑
en ru