W3docs
ru
Войти

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

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

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

Используйте это свойство, когда нужно оформить одну сторону отдельно — например, подчёркивание-разделитель под заголовком или пунктирная нижняя линия на карточке. Когда требуется одинаковый стиль для всех четырёх сторон, краткая запись border-style будет лаконичнее.

Свойство border-bottom-style само по себе не даёт видимого эффекта, если не заданы цвет и ширина границы. Используйте его в паре с border-bottom-width и border-bottom-color, либо задайте всё сразу с помощью краткой записи border-bottom. Исключение — значение none (по умолчанию): оно полностью убирает границу вне зависимости от ширины и цвета.

Информация

Спецификация CSS не определяет, как соединяются границы разных стилей на углах, поэтому смежные стороны с разными стилями могут стыковаться по-разному в разных браузерах.

Начальное значениеnone
Применяется кВсем элементам.
НаследуетсяНет.
АнимируетсяНет.
ВерсияCSS1
DOM Синтаксисobject.style.borderBottomStyle = "dotted";

Синтаксис

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Значения

ЗначениеОписание
noneГраница не отображается. Значение по умолчанию.
hiddenВизуально то же, что none для обычных элементов, но подавляет соседние границы при разрешении конфликтов границ таблицы.
dottedРяд круглых точек.
dashedРяд коротких штрихов.
solidЕдиная непрерывная линия.
doubleДве параллельные сплошные линии. Суммарная толщина плюс зазор равны значению border-bottom-width.
grooveТрёхмерный эффект, при котором граница выглядит врезанной в страницу. Противоположность ridge.
ridgeТрёхмерный эффект, при котором граница выглядит выступающей над страницей. Противоположность groove.
insetТрёхмерный эффект, при котором весь элемент выглядит вдавленным в страницу. Противоположность outset.
outsetТрёхмерный эффект, при котором весь элемент выглядит выступающим из страницы. Противоположность inset.
initialУстанавливает свойство в значение по умолчанию (none).
inheritНаследует значение от родительского элемента.

Примеры

Сплошная и пунктирная границы

Наиболее часто используемые значения — solid и dashed. Здесь заголовок получает сплошную нижнюю границу, а div — пунктирную.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: solid;
      }
      div {
        border-bottom-style: dashed;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a solid bottom border</h2>
    <div>A div element with a dashed bottom border.</div>
  </body>
</html>
Попробуйте сами »

Двойная, пунктирная и рельефная границы

В этом примере сочетаются несколько значений. Обратите внимание: groove и другие трёхмерные стили требуют более широкой границы (здесь 8px) для видимости — тонкие границы сводят трёхмерную тень к минимуму.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: double;
      }
      p {
        border-style: solid;
        border-bottom-style: dashed;
      }
      div {
        border-bottom-style: groove;
        border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a double bottom border</h2>
    <p>A paragraph with a dashed bottom border (overrides the solid shorthand on the bottom side).</p>
    <div>A div element with a groove bottom border.</div>
  </body>
</html>
Попробуйте сами »

Значение hidden

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid black;
        border-bottom-style: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Border on three sides — bottom is hidden</h1>
  </body>
</html>
Попробуйте сами »

Значение inset

inset — трёхмерный стиль, при котором блок выглядит вдавленным в страницу. Тень формируется на основе цвета границы, поэтому эффект наиболее заметен при большей ширине.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid;
        border-bottom-style: inset;
      }
    </style>
  </head>
  <body>
    <h1>Inset bottom border example</h1>
  </body>
</html>
Попробуйте сами »

Значение outset

outset — противоположность inset: блок выглядит выступающим из страницы. Вместе inset, outset, groove и ridge образуют четыре трёхмерных стиля границы, и все четыре используют цвет границы для создания эффекта тени.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        border: 5px solid;
        border-bottom-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Outset bottom border example</h1>
  </body>
</html>
Попробуйте сами »

Когда использовать каждое значение

  • solid — стандартный выбор для большинства элементов интерфейса (карточки, поля ввода, разделители).
  • dashed и dotted — подходят для второстепенных разделителей, областей перетаскивания или всего, что требует более лёгкого визуального веса по сравнению со сплошной линией.
  • double — иногда используется для декоративных заголовков; для отображения обеих линий и зазора необходима ширина не менее 3px.
  • groove / ridge — классические трёхмерные эффекты; редко применяются в современном плоском UI, но по-прежнему актуальны.
  • inset / outset — могут имитировать эффект нажатия кнопки; для более тонкого управления рассмотрите box-shadow.
  • hidden — прежде всего инструмент для табличной разметки; избегайте его на нетабличных элементах, где none понятнее.

Распространённые ошибки

  • Стиль границы сам по себе ничего не отображает, если border-bottom-width равен 0 или border-bottom-color имеет значение transparent. Всегда проверяйте, что все три подсвойства границы заданы.
  • Переопределение краткой записи border-bottom после border-bottom-style сбрасывает стиль обратно на none. Порядок объявлений имеет значение.
  • Значение double требует ширины не менее 3px для отображения двух отдельных линий.
  • Четыре трёхмерных значения (groove, ridge, inset, outset) в некоторых браузерах выглядят одинаково с ridge/groove, когда цвет границы равен currentColor на тёмном фоне — всегда проверяйте с явно заданным цветом.

Связанные свойства

  • border-bottom — краткая запись для ширины, стиля и цвета нижней границы.
  • border-bottom-width — задаёт толщину нижней границы.
  • border-bottom-color — задаёт цвет нижней границы.
  • border-style — задаёт стиль линии для всех четырёх сторон одновременно.
  • border-top-style — аналогичное свойство для верхней стороны.
  • border-left-style — аналогичное свойство для левой стороны.
  • border-right-style — аналогичное свойство для правой стороны.

Практика

Практика
Какие из перечисленных значений допустимы для свойства border-bottom-style в CSS?
Какие из перечисленных значений допустимы для свойства border-bottom-style в CSS?
Was this page helpful?