Ширина границ: border-width

border-width

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 4.0 3.5 1.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.0 1.0 6.0 11.0 3.0
Свойство
border-width — это сокращенное свойство для ширины границ
Описание
Для того чтобы не задавать каждую ширину границы по отдельности существует возможность задать сразу все значения ширины для границ. В качестве значения свойство border-width может принимать от одного до четырех значений.


запись border-width: 15px; равноценна записи border-top-width: 15px; border-right-width: 15px; border-bottom-width: 15px; border-left-width: 15px;
border-width-one
Цифра 1 означает что одно значение, указанное в свойстве border-width, применяется ко всем четырем сторонам


запись border-width: 15px 2em; равноценна записи border-top-width: 15px; border-bottom-width: 15px; border-left-width: 2em; border-right-width: 2em;
border-width-two
Цифра 1 соответствует первому значению в свойстве border-width, а цифра 2 — второму значению


запись border-width: 15px 2em thin; равноценна записи border-top-width: 15px; border-right-width: 2em; border-left-width: 2em; border-bottom-width: thin;
border-width-three
Цифра 1 соответствует первому значению в свойстве border-width, цифра 2 — второму значению, а цифра 3 — третьему значению


запись border-width : 15px 2em thin thick; равноценна записи border-top-width: 15px; border-right-width: 2em; border-bottom-width: thin; border-left-width: thick;
border-width-four
Цифра 1 соответствует первому значению в свойстве border-width, цифра 2 — второму значению, цифра 3 — третьему значению, а цифра 4 — четвертому значению

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
border-top-width | border-right-width | border-bottom-width | border-left-width
Значение по умолчанию
medium — для каждого значения
Правила записи
свойство: значение; или
свойство: значение значение; или
свойство: значение значение значение; или
свойство: значение значение значение значение;
Примеры

<p>

У этого абзаца ширина границ 10px

</p>

<p>

Этот абзац имеет ширину границ 1,5em

</p>

<p>

Этот абзац имеет ширину границ thin

</p>

<p>

Этот абзац имеет ширину границ medium

</p>

<p>

Этот абзац имеет ширину границ thick

</p>

<p>

Этот абзац имеет ширину верхней и нижней границы 14px, а правой и левой thin

</p>

<p>

Этот абзац имеет ширину верхней границы 14px, ширину правой и левой границ thin, а ширину нижней границы medium

</p>

<p>

Этот абзац имеет ширину верхней границы 14px, ширину правой границы thin, ширину нижней границы 3em, а ширину левой границы thick

</p>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться