Свойство border-style определяет стиль границы блока. С помощью этого свойства можно установить стиль для всех границ элемента (border-top-style, border-right-style, border-bottom-style, border-left-style). Стиль рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit. В зависимости от количества заданых значений (от 1 до 4), устанавливаются цвета для разных сторон рамки:
- Если указано единственное значение, то данная величина устанавливает стиль для всех сторон (border-top-style, border-right-style, border-bottom-style, border-left-style)
- Если указано два значения, то первая величина устанавливает стиль для верхней и нижней стороны (border-top-style, border-bottom-style), а вторая – для левой и правой стороны (border-left-style, border-right-style)
- Три значения, устанавливают, соответственно, стиль рамки для верхней (border-top-style), правой и левой (border-left-style, border-right-style), а также нижней (border-bottom-style) сторон.
- Четыре значения последовательно применяются для всех сторон начиная с верхней по часовой стрелке – верхняя, правая, нижняя, левая границы.
Доступные стили:
Для стилей groove, ridge, inset, outset в спецификации не утвержден метод расчета цвета, поэтому в разных браузера, рамки с такими стилями могут немного визуально отличаться (см. примеры). Так же в спецификации не обсуждается размер точек, штрихов и промежутков между ними для стилей dotted и dashed, рекомендуется только выбирать такие размеры, чтобы углы рамки смотрелись симметрично, кроме этого в браузерах на движках Trident (Internet Explorer) и Gecko (Firefox) стиль dotted отображается кружками, а в браузерах на движках WebKit (Chrome,Safari) и Presto (Opera) квадратиками.
Специфические стили:
Данные стили доступны только в определенных версиях браузеров и не являются часть стандарта CSS.
Trident (Internet Explorer)
- window-inset – выглядит аналогично inset, за тем исключением, что дополнительно рамка окружена неприрывной линией, нарисованной основным цветом.
Примеры использования
CSS 2.1, CSS3
| Значение | 1px | 2px | 3px | 5px | 15px |
|---|---|---|---|---|---|
| .elementBorderStyle { border–style: dotted; } |
dotted
пунктир |
dotted
пунктир |
dotted
пунктир |
dotted
пунктир |
dotted
пунктир |
| .elementBorderStyle { border–style: dashed; } |
dashed
штрих |
dashed
штрих |
dashed
штрих |
dashed
штрих |
dashed
штрих |
| .elementBorderStyle { border–style: solid; } |
solid
линия |
solid
линия |
solid
линия |
solid
линия |
solid
линия |
| .elementBorderStyle { border–style: double; } |
double
линия |
double
линия |
double
линия |
double
линия |
double
линия |
| .elementBorderStyle { border–style: groove; } |
groove
паз |
groove
паз |
groove
паз |
groove
паз |
groove
паз |
| .elementBorderStyle { border–style: ridge; } |
ridge
ребро |
ridge
ребро |
ridge
ребро |
ridge
ребро |
ridge
ребро |
| .elementBorderStyle { border–style: inset; } |
inset
вкладка |
inset
вкладка |
inset
вкладка |
inset
вкладка |
inset
вкладка |
| .elementBorderStyle { border–style: outset; } |
outset
накладка |
outset
накладка |
outset
накладка |
outset
накладка |
outset
накладка |
Вариации в отображении стилей для рамок элементов в зависимости от браузеров
 |
| Internet Explorer |
|---|
 |
| Firefox |
|---|
 |
| Chrome, Safari (WebKit) |
|---|
 |
| Opera (Presto) |
|---|
Ваш браузер
| 3px | 5px | 15px |
|---|---|---|
|
dotted
|
dotted
|
dotted
|
|
dashed
|
dashed
|
dashed
|
|
groove
|
groove
|
groove
|
|
ridge
|
ridge
|
ridge
|
|
inset
|
inset
|
inset
|
|
outset
|
outset
|
outset
|
Свойство border-style относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение none. На данный момент свойство поддерживается во всех основных браузерах.
Источник