CSS-свойство border-width
— это более короткое свойство для объединения отдельных свойств ширины границ, то есть border-top-width
, border-right-width
, border-bottom-width
и border-left-width
в одном.
Значение по умолчанию: | medium |
Применяется к: | Все элементы |
Наследование: | Нет |
Анимирование: | Да. Анимируемые свойства |
Версия: | CSS 1, 2, 3 |
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
border-width: [ thin | medium | thick | length ] 1 to 4 values | inherit
Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.
- Если указано одно значение, оно применяется ко всем сторонам границы.
- Если указано два значения, первое значение используется для верхней и нижней границы, а второе для правой и левой.
- Если указано три значения, первое значение используется для верхней границы, второе значение используется для правой и левой границ, а третье значение для нижней границы.
- Если указано четыре значения, каждое значение применяется к границе отдельно в порядке сверху, справа, снизу и слева.
Примеры написания кода свойства border-width
:
p {
border-style: solid;
border-width: 5px;
}
Вы должны объявить свойство border-style
перед свойством border-width
. Элемент должен иметь границы, прежде чем вы сможете установить ширину границы, поскольку значением свойства border-style
по умолчанию является none
.
Значения свойств
В следующей таблице описаны значения этого свойства.
Значение | Описание |
---|---|
thin |
Тонкий border . |
medium |
Средний border . |
thick |
Толстый border . |
length | Значение длины в px , pt , cm , em и т. д. Отрицательные значения недопустимы. |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение свойства его родительского элемента border-bottom-color . |
Поддержка браузеров
Свойство border-width
поддерживается во всех основных браузерах.