свойство border-width

Свойство border-width определяет толщину линии рамки вокруг элемента. С помощью этого свойства можно установить ширину всех границ элемента (border-top-width, border-right-width, border-bottom-width, border-left-width). Толщина рамки, по умолчанию, не наследуется и считается равным значению medium. Толщина может задаваться любым доступным способом в соответствии со стандартом CSS 2.1 или CSS 3, ключевыми словами thin, medium, thick, либо значением inherit. В зависимости от количества заданых значений (от 1 до 4), устанавливаются цвета для разных сторон рамки:

  • Если указано единственное значение, то данная величина применяется для толщины всех сторон (border-top-width, border-right-width, border-bottom-width, border-left-width)
  • Если указано два значения, то первая величина устанавливает толщину верхней и нижней стороны (border-top-width, border-bottom-width), а вторая - для левой и правой стороны (border-left-width, border-right-width)
  • Три значения, устанавливают, соответственно, толщину границы для верхней (border-top-width), правой и левой (border-left-width, border-right-width), а также нижней (border-bottom-width) сторон.
  • Четыре значения последовательно применяются для всех сторон начиная с верхней по часовой стрелке - верхняя, правая, нижняя, левая границы.

Допустимые значения:

Примеры использования

Значение solid dotted dashed groove inset
.elementBorderStyle {
    border-width: thin;
}
thin
solid
thin
dotted
thin
dashed
thin
groove
thin
inset
.elementBorderStyle {
    border-width: medium;
}
medium
solid
medium
dotted
medium
dashed
medium
groove
medium
inset
.elementBorderStyle {
    border-width: thick;
}
thick
solid
thick
dotted
thick
dashed
thick
groove
thick
inset
.elementBorderStyle {
    border-width: 5%;
}
5%
solid
5%
dotted
5%
dashed
5%
groove
5%
inset
.elementBorderStyle {
    border-width: 1em;
}
1em
solid
1em
dotted
1em
dashed
1em
groove
1em
inset
.elementBorderStyle {
    border-width: 1ex;
}
1ex
solid
1ex
dotted
1ex
dashed
1ex
groove
1ex
inset
.elementBorderStyle {
    border-width: 1px;
}
1px
solid
1px
dotted
1px
dashed
1px
groove
1px
inset
.elementBorderStyle {
    border-width: 0.10in;
}
0.10in
solid
0.10in
dotted
0.10in
dashed
0.10in
groove
0.10in
inset
.elementBorderStyle {
    border-width: 0.5cm;
}
0.5cm
solid
0.5cm
dotted
0.5cm
dashed
0.5cm
groove
0.5cm
inset
.elementBorderStyle {
    border-width: 2mm;
}
2mm
solid
2mm
dotted
2mm
dashed
2mm
groove
2mm
inset
.elementBorderStyle {
    border-width: 1pt;
}
1pt
solid
1pt
dotted
1pt
dashed
1pt
groove
1pt
inset
.elementBorderStyle {
    border-width: 1pc;
}
1pc
solid
1pc
dotted
1pc
dashed
1pc
groove
1pc
inset

 

Свойство border-width относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение medium. На данный момент свойство поддерживается во всех основных браузерах.

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

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

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

Толщина линии рамки элемента

Синтаксис:

[ <length> | thin | medium | thick ] {1,4} | inherit

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

medium

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

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

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

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

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

визуальные

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

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

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

Internet Explorer

5+

Firefox

2.0+

Chrome

1.0+

Safari

1.0+

Opera

8.5+