css властивість border-width
Властивість border-width встановлює товщину для всіх меж елементу.
Вона використовується для скороченого запису border-top-width, border-right-width, border-bottom-width та border-left-width.
Ви можете використати від одного до чотирьох значень. Кожне значення визначає стиль для кожної зі сторін елементу.
Наприклад, якщо задано всі чотири значення вони задаватимуть стилі для верхньої, правої, нижньої та лівої сторін(саме в такому порядку). Три значення задають стилі для верхньої, лівої та правої, нижньої сторін(саме в такому порядку).
| Число значень | Результат |
|---|---|
| 1 | Товщина кордону буде встановлена для всіх сторін елемента. |
| 2 | Перше значення встановлює товщину верхнього та нижнього кордону, друге - лівого та правого. |
| 3 | Перше значення задає товщину верхнього кордону, друге - одночасно для лівого і правого кордону, а третє - нижнього. |
| 4 | По черзі встановлюється товщину верхнього, правого, нижнього та лівого кордонів. |
| Порада: | Завжди оголошуйте властивість кордону стилю до властивості |
| Нотатка: | Важливо, що значення без задання дорівнює medium, початкове значення для стилю - none, тому без |
| Нотатка: | Специфікація не визначає чітко товщину кожного з ключових слів ( |
Синтаксис
border-width: medium|thin|thick|length|initial|inherit;Властивість border-width може отримувати 6 значень:
mediumЛінія середньої товщини (3 пікселі). Без задання.
thinТонка лінія. Значення в пікселях може змінюватися в залежності від браузера, але зазвичай становить 1 піксель
thickТовста лінія (6 пікселів)
lengthДля точного встановлення товщини можна використовувати будь-які одиниці виміру прийняті в CSS.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
| Значення без задання: | medium |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderWidth="1px 5px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| border-width | 1.0 |
4.0 |
1.0 |
1.0 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| border-width | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Вказуємо товщину кордону для елемента в 15px
p {
border-style: solid;
border-width: 15px;
}