css властивість border-width

Властивість border-width встановлює товщину для всіх меж елементу.

Властивість `border-width`

Вона використовується для скороченого запису border-top-width, border-right-width, border-bottom-width та border-left-width.

Ви можете використати від одного до чотирьох значень. Кожне значення визначає стиль для кожної зі сторін елементу.

Наприклад, якщо задано всі чотири значення вони задаватимуть стилі для верхньої, правої, нижньої та лівої сторін(саме в такому порядку). Три значення задають стилі для верхньої, лівої та правої, нижньої сторін(саме в такому порядку).

Число значень	Результат
1	Товщина кордону буде встановлена для всіх сторін елемента.
2	Перше значення встановлює товщину верхнього та нижнього кордону, друге - лівого та правого.
3	Перше значення задає товщину верхнього кордону, друге - одночасно для лівого і правого кордону, а третє - нижнього.
4	По черзі встановлюється товщину верхнього, правого, нижнього та лівого кордонів.

автор: Svitlana

Порада: Завжди оголошуйте властивість кордону стилю до властивості border-width. Елемент повинен мати кордони, перш ніж Ви зможете змінити їх товщину.
автор: Svitlana
Нотатка: Важливо, що значення без задання дорівнює medium, початкове значення для стилю - none, тому без border-style межа в будь-якому випадку матиме товщину 0.
автор: Svitlana
Нотатка: Специфікація не визначає чітко товщину кожного з ключових слів (thin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним: thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.
автор: Svitlana

Синтаксис

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"

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
border-width	1.0	1.0	1.0	3.5	4.0

Підтримка: мобільні переглядачі
Переглядач
border-width	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

Одне значення border-width задає товщину 15px одразу всім чотирьом сторонам.

HTML

<p>Усі чотири межі — по 15 пікселів.</p>

CSS

p {
    border-style: solid;
    border-width: 15px;
    padding: 8px;
}

автор: Svitlana

Динамічний приклад

автор: Svitlana

Демонстрація роботи властивості

автор: Svitlana

Демонстрація роботи властивості

автор: Svitlana

Приклад використання властивості

автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!