Определение border-bottom-style
CSS свойство border-bottom-style определяет стиль нижней границы элемента.
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.borderBottomStyle="dotted" Попробуй |
Поддержка border-bottom-style
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-bottom-style | 1.0 | 5.5 | 1.0 | 1.0 | 9.2 |
Синтаксис border-bottom-style
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Значения border-bottom-style
| Значение | Описание | Демонстрация |
|---|---|---|
| none | Определяет не границы. Это значение по умолчанию | Демо ❯ |
| hidden | То же, что и "none", за исключением разрешения пограничных конфликтов для элементов таблицы | Демо ❯ |
| dotted | Определяет пунктирную границу | Демо ❯ |
| dashed | Определяет пунктирную границу | Демо ❯ |
| solid | Определяет сплошную границу | Демо ❯ |
| double | Определяет двойную границу | Демо ❯ |
| groove | Определяет трехмерную рифленую границу. Эффект зависит от значения border-color | Демо ❯ |
| ridge | Определяет трехмерную ребристую границу. Эффект зависит от значения border-color | Демо ❯ |
| inset | Определяет границу трехмерной вставки. Эффект зависит от значения border-color | Демо ❯ |
| outset | Определяет трехмерную начальную границу. Эффект зависит от значения border-color | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-bottom-style
Пример
Нижняя граница канавки:
div {
border-bottom-style: groove;
border-bottom-color: coral;
border-bottom-width: 7px;
}
Попробуйте сами »
Пример
Нижняя граница гребня:
div {
border-bottom-style: ridge;
border-bottom-color: coral;
border-bottom-width: 7px;
}
Попробуйте сами »
Пример
Нижняя граница со вставкой:
div {
border-bottom-style: inset;
border-bottom-color: coral;
border-bottom-width: 7px;
}
Попробуйте сами »
Пример
Начальная нижняя граница:
div {
border-bottom-style: outset;
border-bottom-color: coral;
border-bottom-width: 7px;
}
Попробуйте сами »
Страницы по теме border-bottom-style
CSS Учебник: CSS Границы
CSS Справочник: border-bottom свойство
HTML DOM справочник: borderBottomStyle свойство