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 включно не підтримує значення
автор: Svitlanainherit.
Синтаксис
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
| Значення без задання: | medium none color |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | bject.style.borderBottom="3px solid blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Усі межі задано суцільними, а border-bottom переписує нижню: товста, крапчаста, червона.
HTML
<p>Нижня межа — товста крапчаста червона, решта лишаються суцільними чорними.</p>CSS
p {
border-style: solid;
border-bottom: thick dotted #ff0000;
padding: 8px;
}Динамічний приклад
Приклад використання властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!