свойство 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
накладка

Вариации в отображении стилей для рамок элементов в зависимости от браузеров

border-style для Internet Explorer (Trident)
Internet Explorer
border-style для Firefox (Gecko)
Firefox
border-style для Chrome (WebKit)
Chrome, Safari (WebKit)
border-style для Opera (Presto)
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. На данный момент свойство поддерживается во всех основных браузерах.

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

  • border-top-style - Стиль верхней линии рамки элемента
  • border-right-style - Стиль правой линии рамки элемента
  • border-bottom-style - Стиль нижней линии рамки элемента
  • border-left-style - Стиль левой линии рамки элемента
  • border - Свойства рамки элемента

Краткое описание

Стиль линии рамки элемента

Синтаксис:

[none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4}

По умолчанию:

none

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.borderStyle

Кроссбраузерная совместимость

Internet Explorer

5+

Firefox

2.0+

Chrome

1.0+

Safari

1.0+

Opera

8.5+