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

Свойство `border-style` задает стиль границы для всех сторон одновременно или отдельно для каждой стороны. Является свойством-сокращением для следующих свойств: `border-left-style`, `border-right-style`, `border-top-style`, `border-bottom-style`.

## Синтаксис

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

## Значения

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

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

## Количество значений

Свойство может принимать `1`, `2`, `3` или `4` значений, указываемых через пробел:

Количество | Описание
--- | ---
`1` | Тип для всех сторон одновременно.
`2` | Первое значение для верха и низа, второе - для левой и правой границ.
`3` | Первое значение для верха, второе - для левой и правой границ, третье - для нижней.
`4` | Первое значение для верхней границы, второе - для правой, третье - для нижней, четвертое - для левой границы.

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

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

:

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

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

:

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

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

:

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

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

:

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

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

:

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

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

:

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

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

:

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

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

:

## Пример

В данном примере заданы различные типы границы для разных сторон элементов:

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

:

## Пример

А сейчас для разных сторон элемента также задана различная толщина границы и ее цвет:

`<div id="elem"></div>` `#elem { border-width: 1px 2px 3px 4px; border-style: dashed dotted solid double; border-color: red blue green black; width: 300px; height: 100px; }`

:

## Пример

Сейчас для верхней и нижней границы задан тип `solid`, а для правой и левой - `dotted`:

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

:

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

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

← →
↑
en ru