css властивість border-width
Властивість border-width встановлює товщину для всіх меж елементу.
Вона використовується для скороченого запису border-top-width, border-right-width, border-bottom-width та border-left-width.
Ви можете використати від одного до чотирьох значень. Кожне значення визначає стиль для кожної зі сторін елементу.
Наприклад, якщо задано всі чотири значення вони задаватимуть стилі для верхньої, правої, нижньої та лівої сторін(саме в такому порядку). Три значення задають стилі для верхньої, лівої та правої, нижньої сторін(саме в такому порядку).
| Число значень | Результат |
|---|---|
| 1 | Товщина кордону буде встановлена для всіх сторін елемента. |
| 2 | Перше значення встановлює товщину верхнього та нижнього кордону, друге - лівого та правого. |
| 3 | Перше значення задає товщину верхнього кордону, друге - одночасно для лівого і правого кордону, а третє - нижнього. |
| 4 | По черзі встановлюється товщину верхнього, правого, нижнього та лівого кордонів. |
- Порада
-
Завжди оголошуйте властивість кордону стилю до властивості
автор: Svitlanaborder-width. Елемент повинен мати кордони, перш ніж Ви зможете змінити їх товщину. - Нотатка
-
Важливо, що значення без задання дорівнює medium, початкове значення для стилю - none, тому без
автор: Svitlanaborder-styleмежа в будь-якому випадку матиме товщину 0. - Нотатка
-
Специфікація не визначає чітко товщину кожного з ключових слів (
автор: Svitlanathin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним:thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.
Синтаксис
border-width: medium|thin|thick|length|initial|inherit;Властивість border-width може отримувати 6 значень:
-
medium -
Лінія середньої товщини (3 пікселі). Без задання.
автор: Svitlana -
thin -
Тонка лінія. Значення в пікселях може змінюватися в залежності від браузера, але зазвичай становить 1 піксель
автор: Svitlana -
thick -
Товста лінія (6 пікселів)
автор: Svitlana -
length -
Для точного встановлення товщини можна використовувати будь-які одиниці виміру прийняті в CSS.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | medium |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderWidth="1px 5px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
Одне значення border-width задає товщину 15px одразу всім чотирьом сторонам.
HTML
<p>Усі чотири межі — по 15 пікселів.</p>CSS
p {
border-style: solid;
border-width: 15px;
padding: 8px;
}Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!