CSS | свойство border-bottom-style

Опубликовано: 5 Января, 2022

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

Синтаксис:

 стиль границы-дна: нет | скрытый | пунктирный | пунктирный | сплошной | двойной | канавка |
гребень | вставка | начало | начальная | наследование;

Стоимость недвижимости:

none: это значение по умолчанию, которое делает ширину нижней границы равной нулю. Следовательно, это не видно.

  • Синтаксис:
     стиль нижней границы: нет;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    color: green;
    text-align: center;
    border: 5px solid black;
    /* CSS Property for border-bottom-style */
    border-bottom-style: none;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:none; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

скрытый: используется, чтобы сделать нижнюю границу невидимой. Это значение аналогично none, за исключением случая разрешения конфликта границ элементов таблицы.

  • Синтаксис:
     стиль нижней границы: скрытый;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    color: green;
    text-align: center;
    border: 5px solid black;
    /* CSS Property for border-bottom-style */
    border-bottom-style: hidden;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:hidden; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

dotted: образует нижнюю границу с рядом точек.

  • Синтаксис:
     стиль нижней границы: пунктирная;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    color: green;
    text-align: center;
    border: 5px solid black;
    /* CSS Property for border-bottom-style */
    border-bottom-style: dotted;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:dotted; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

пунктирная линия: образует нижнюю границу с серией коротких отрезков линии.

  • Синтаксис:
     стиль нижней границы: пунктирная;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    color: green;
    text-align: center;
    border: 5px solid black;
    /* CSS Property for border-bottom-style */
    border-bottom-style: dashed;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:dashed; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

solid: используется для создания нижней границы из одного сегмента сплошной линии.

  • Синтаксис:
     стиль нижнего края: сплошной;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    color: green;
    text-align: center;
    border: 5px solid black;
    /* CSS Property for border-bottom-style */
    border-bottom-style: solid;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:solid; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

double: делает нижнюю границу двойной сплошной линией. В этом случае ширина границы равна сумме ширины двухстрочных сегментов и расстояния между ними.

  • Синтаксис:
     стиль нижнего края: двойной;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    color: green;
    text-align: center;
    border: 5px solid black;
    /* CSS Property for border-bottom-style */
    border-bottom-style: double;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:double; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

канавка: делает нижнюю границу рифленым линейным сегментом, что создает ощущение, что он проходит внутрь.

  • Синтаксис:
     стиль границы-дна: канавка;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    border: 10px;
    border-style: solid;
    /* CSS Property for border-bottom-style */
    border-bottom-style: groove;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:groove; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

вставка: делает нижнюю границу встроенным линейным сегментом, что создает ощущение, что он глубоко закреплен на экране.

  • Синтаксис:
     граница-нижний-стиль: вставка;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    border: 10px;
    border-style: solid;
    /* CSS Property for border-bottom-style */
    border-bottom-style: inset;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:inset; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

начало: противоположно вставке. Он делает нижнюю границу сегментом линии, который, кажется, выходит наружу.

  • Синтаксис:
     граница-нижний-стиль: начало;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    border: 10px;
    border-style: solid;
    /* CSS Property for border-bottom-style */
    border-bottom-style: outset;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:outset; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

initial: устанавливает для свойства border-bottom-style значение по умолчанию.

  • Синтаксис:
     стиль нижнего края: начальный;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    h1 {
    color: green;
    text-align: center;
    border: 5px solid black;
    /* CSS Property for border-bottom-style */
    border-bottom-style: initial;
    }
    </ style >
    </ head >
    < body >
    <!-- border-bottom-style:initial; -->
    < h1 >GeeksForGeeks</ h1 >
    </ body >
    </ html >
  • Выход:

Наследовать: свойство стиля нижнего края границы, которое должно быть унаследовано от его родительского элемента.

  • Синтаксис:
     граница нижнего стиля: наследование;
  • Пример:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    CSS border-bottom-style Property
    </ title >
    <!-- Internal CSS Style Sheet -->
    < style >
    div {
    border-bottom-style: double;
    }
    h1 {
    color: green;
    text-align: center;
    border: 5px solid black;
    /* CSS Property | border-bottom-style */
    border-bottom-style: inherit;
    }
    </ style >
    </ head >
    < body >
    < div >
    <!-- border-bottom-style: inherit; -->
    < h1 >GeeksForGeeks</ h1 >
    </ div >
    </ body >
    </ html >
  • Выход:

Поддерживаемые браузеры: браузеры, поддерживаемые свойством border-bottom-style , перечислены ниже:

  • Google Chrome 1.0
  • Internet Explorer 5.5
  • Firefox 1.0
  • Opera 9.2
  • Safari 1.0
Technical Scripter Picked CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023