Свойство border-style
Свойство 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. На данный момент свойство поддерживается во всех основных браузерах.
Источник
