css властивість border-bottom-style
Властивість border-bottom-style встановлює стиль нижньої межі елементу.
Цікаво те, що специфікація не визначає як межі з різними стилями поєднуються в кутах між собою.
Ви також можете використовувати border-style, щоб задати стилі для всіх меж елементу, або border-bottom, щоб задати всі властивості для нижньої межі.
Значення без задання дорівнює medium. Ви можете змінити ширину межі за допомогою властивостей border-bottom-width або border-width
Синтаксис
border-bottom-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Властивість border-bottom-style може отримувати 12 значень:
noneГраниця не відображається
hiddenМає той же ефект, що і
noneза винятком застосуванняborder-bottom-styleдо комірок таблиці, у якій значення властивостіborder-collapseвстановлено якcollapse. У цьому випадку нижня межа в комірці не буде відображатися взагалі.dottedКордон з точок.
dashedПунктирний кордон.
solidСуцільний кордон.
doubleПодвійний кордон
grooveРифлений 3D кордон.
ridgeРебристий 3D кордон.
insetУрізаний (звеpxу-справа) 3D кордон.
outsetУрізаний (знизу-зліва) 3D кордон.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderBottomStyle="dotted" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| border-bottom-style | 1.0 |
7.0 |
1.0 |
1.0 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| border-bottom-style | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Простий приклад використання властивості
Встановлення стилю ніжньої границі
p {
border-style: solid;
border-bottom-style: dotted;
}