CSS приклад: border-width

Опис

Встановлює товщину межі одночасно на всіх сторонах елемента або індивідуально для кожної сторони. Спосіб зміни товщини залежить від числа значень.

Синтаксис

border-width: [значення | thin | medium | thick] {1,4} | inherit

Значення

Три змінні — thin (2 пікселі), medium (4 пікселі) і thick (6 пікселів) встановлюють товщину межі. Для більш точного значення, товщину можна вказати в пікселях або інших одиницях. inherit успадковує значення батька.

Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх пробілом. Ефект залежить від кількості і поданий в табл. 1.

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

Браузери

Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх меж товщиною 1px. Якщо одна з меж блока має товщину 2px і вище, то в IE7 значення dotted перетворюється в dashed.

Internet Explorer до версії 7.0 включно не підтримує значення hidden і inherit.

Товщина межі при використанні ключових слів thin, medium і thick в різних браузерах може трохи відрізнятися.

Границі

Часті запитання

Q: Як використовувати border-width в CSS?

A: Властивість border-width в CSS використовується для встановлення ширини меж блокового елемента. Наприклад: border-width: 2px;
Q: Де можна використати border-width в CSS?

A: Властивість border-width використовується для встановлення ширини межі блокового елемента у будь-якому місці, де потрібно визначити ширину межі.
Q: Як встановити різні ширини меж для різних сторін елемента?

A: Для встановлення різних ширин меж для кожної сторони елемента використовують властивості: border-top-width, border-right-width, border-bottom-width, border-left-width.
Q: Чи можна встановити border-width від'ємним значенням?

A: Так, border-width можна встановити від'ємним значенням, що призведе до внутрішнього відступу між контентом і межею елемента.
Q: Як використовувати border-width з іншими властивостями меж у CSS?

A: Властивість border-width можна комбінувати з іншими властивостями меж, такими як border-style і border-color, для встановлення повного стилю межі блокового елемента.