| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | medium |
|---|---|
| Наслідується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/box.html#border-width-properties |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює товщину межі знизу елемента.
Синтаксис
border-bottom-width: значення | thin | medium | thick | inherit
Значення
Три змінні — thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) встановлюють товщину межі знизу. Для більш точного значення, товщину можна вказати у пікселях або інших одиницях. inherit успадковує значення батька.
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-bottom-width</title>
<style>
h1 {
border-color: #ccc; /* Колір межі */
border-style: double; /* Стиль межі */
border-bottom-width: 7px; /* Товщина лінії знизу тексту */
border-right-width: 7px; /* Товщина лінії справа від тексту */
padding-left: 5px; /* Відступ зліва від тексту */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>Результат цього прикладу показано на рис. 1.
Об'єктна модель
[window.]document.getElementById("elementID").style.borderBottomWidth
Браузери
Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px і більше значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх меж товщиною 1px. Якщо одна з меж блоку має товщину 2px і більше, то в IE7 значення dotted перетворюється в dashed.
Internet Explorer до версії 7.0 включно не підтримує значень hidden і inherit.
Товщина межі при використанні ключових слів thin, medium і thick у різних браузерах може трохи відрізнятися.