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


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

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

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

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

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

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

Завжди оголошуйте властивість кордону стилю до властивості border-width. Елемент повинен мати кордони, перш ніж Ви зможете змінити їх товщину.

Нотатка:

Важливо, що значення без задання дорівнює medium, початкове значення для стилю - none, тому без border-style межа в будь-якому випадку матиме товщину 0.

Нотатка:

Специфікація не визначає чітко товщину кожного з ключових слів (thin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним: thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.

Синтаксис

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; 


}

Додаткові посилання