Свойство CSS border-width
Свойство CSS border-width устанавливает ширину границы элемента. Оно применяется ко всем четырем сторонам одновременно. Вы также можете задать ширину для каждой стороны отдельно, используя следующие расширенные свойства:
- border-top-width, определяющий ширину верхней границы элемента.
- border-left-width, определяющий ширину левой границы элемента.
- border-right-width, определяющий ширину правой границы элемента.
- border-bottom-width, определяющий ширину нижней границы элемента.
INFO
Свойство border-style по умолчанию имеет значение none. Если вы не укажете стиль границы, её ширина не будет видна.
Это свойство принимает от одного до четырех значений. Одно значение применяется ко всем четырем сторонам. Два значения применяются к верхним/нижним и левым/правым сторонам соответственно. Три значения применяются к верхней, левой/правой и нижней сторонам. Четыре значения применяются к верхней, правой, нижней и левой сторонам по порядку.
| Начальное значение | medium |
|---|---|
| Наследуется | Нет |
| Анимация | Да. Ширина границы может анимироваться. |
| Версия | CSS1 |
| JavaScript-синтаксис | object.style.borderWidth = "1px 5px"; |
Синтаксис
Синтаксис свойства CSS border-width
border-width: <line-width>{1,4} | initial | inherit;Пример свойства border-width:
Пример свойства CSS border-width
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>This paragraph's border width is set to 1px.</p>
</body>
</html>Пример свойства border-width с тремя значениями:
Пример свойства CSS border-width со значениями px и medium
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #666;
padding: 5px;
border-style: solid;
}
.thin {
border-width: 1px;
}
.medium {
border-width: medium;
}
.thick {
border-width: 10px;
}
</style>
</head>
<body>
<p class="thin">This paragraph's border width is set to 1px.</p>
<p class="medium">This paragraph's border width is set to medium.</p>
<p class="thick">This paragraph's border width is set to 10px.</p>
</body>
</html>Результат
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| medium | Определяет границу средней толщины. Это значение по умолчанию. (Относительное ключевое слово с пиксельными значениями, определяемыми браузером.) | Попробовать » |
| thin | Определяет тонкую границу. | Попробовать » |
| thick | Определяет толстую границу. | Попробовать » |
| length | Определяет толщину границы. | Попробовать » |
| initial | Устанавливает свойству значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие из следующих значений можно использовать для указания ширины границ CSS?