Перейти к содержанию

border-bottom-style

Свойство border-bottom-style устанавливает стиль границы внизу элемента.

Демо

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* Keyword values */
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

/* Global values */
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-style: revert;
border-bottom-style: revert-layer;
border-bottom-style: unset;

Свойство border-bottom-style указывается как одно ключевое слово, выбранное из доступных для свойства border-style.

Значения

none

Линия не отображается и значение её толщины обнуляется.

hidden

Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.

dotted

Линия состоящая из набора точек.

dashed

Пунктирная линия, состоящая из серии коротких отрезков.

solid

Сплошная линия.

double

Двойная линия.

groove

Создает эффект вдавленной линии.

ridge

Создает эффект рельефной линии.

inset

Псевдотрехмерная линия.

outset

Псевдотрехмерная линия.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Значение по-умолчанию: Нет

Применяется ко всем элементам

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>border-bottom-style</title>
        <style>
            .panel {
                background: #ccc; /* Цвет фона */
            }
            .panel p {
                padding: 5px; /* Добавляем поля */
                margin: 0; /* Убираем отступы у абзаца */
            }
            .title {
                background: navy; /* Цвет фона */
                color: white; /* Цвет текста */
                border-bottom-width: 2px; /* Толщина линии внизу */
                border-bottom-style: solid; /* Стиль линии внизу */
                border-bottom-color: white; /* Цвет линии внизу */
            }
        </style>
    </head>
    <body>
        <div class="panel">
            <p class="title">Флэнжер</p>
            <p>
                Флэнжер изящно дает конструктивный рефрен,
                потому что современная музыка не
                запоминается.
            </p>
        </div>
    </body>
</html>

Комментарии