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

Властивість border-bottom - універсальна властивість і дозволяє одночасно задати значення:

• border-bottom-width
• border-bottom-style
• border-bottom-color

Усі три властивості можуть бути написані в довільному порядку, розділені пробілом. Браузер сам визначить, яке з них відповідає потрібній властивості. Одною або двома з них можна знехтувати, тоді вони отримають значення без задання. Це дуже важливо, оскільки як й усі властивості для скороченого запису, border-bottom задає значення властивості навіть якщо вона не була оголошена.

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

border-bottom: border-width border-style border-color|initial|inherit;

Властивість border-bottom може отримувати 5 значень:

border-bottom-width

Визначає ширину нижньої межі. Значення за замовчуванням - "middle"

автор: Svitlana

правити

border-bottom-style

Визначає стиль нижньої межі. Значення за умовчанням - "none"

автор: Svitlana

правити

border-bottom-color

Вказує колір нижньої межі. Значення за замовчуванням - це колір тексту

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
border-bottom	1.0	1.0	1.0	3.5	4.0

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

Переглядач
border-bottom	1.0	1.0	1.0

Приклади

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

<p>Нижня межа — товста крапчаста червона, решта лишаються суцільними чорними.</p>

p {
    border-style: solid;
    border-bottom: thick dotted #ff0000;
    padding: 8px;
}