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

Свойство CSS border-style устанавливает стиль линии всех четырёх сторон рамки элемента одновременно — например solid, dashed или dotted. На этой странице описаны все возможные значения, принцип сокращённой записи от одного до четырёх значений и подводные камни, о которых стоит знать заранее.

border-style является сокращением для четырёх отдельных свойств сторон: border-top-style, border-bottom-style, border-left-style и border-right-style.

Почему это важно

Рамка становится видимой только при наличии стиля. Это самая частая ошибка новичков: если задать border-width и border-color, но оставить border-style в значении по умолчанию none, ничего не отобразится — браузер не резервирует место и не рисует линию. Таким образом, border-style фактически является переключателем, включающим рамку. В большинстве реального кода все три свойства задаются сразу через сокращение border (например, border: 1px solid #1c87c9;), однако напрямую обращаться к border-style удобно, когда нужен разный стиль линии для каждой стороны или когда при наведении/фокусе изменяется только стиль при фиксированной ширине (это позволяет избежать сдвига макета).

Рамка отрисовывается поверх фона элемента, значение свойства не наследуется и не анимируется.

Как работает сокращённая запись от одного до четырёх значений

border-style принимает от одного до четырёх значений, позволяя задать собственный стиль для каждой стороны:

Одно значение — применяется ко всем четырём сторонам.
Два значения — первое задаёт верхнюю и нижнюю стороны; второе — левую и правую.
Три значения — первое задаёт верхнюю; второе — левую и правую; третье — нижнюю.
Четыре значения — верхняя, правая, нижняя, левая, по часовой стрелке (удобный мнемоник: TRouBLe).

Замечание о поддержке браузерами: все современные браузеры поддерживают все перечисленные ниже значения. 3D-стили (groove, ridge, inset, outset) создают эффект на основе значения border-color, поэтому они выглядят едва заметными на светлых цветах и полностью исчезают, если цвет black или очень тёмный.

Начальное значение	none
Применяется к	Всем элементам. Также применяется к ::first-letter.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS1
DOM-синтаксис	object.style.borderStyle = "dotted double";

Синтаксис

Синтаксис свойства CSS border-style

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

Пример свойства border-style:

Пример свойства CSS border-style со значением dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-style: dotted;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Example of dotted border-style.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства border-style, где каждая сторона имеет своё значение:

Пример свойства CSS border-style со значениями double, solid, dashed и dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-width: 4px;
        border-style: double solid dashed dotted;
        border-color: #1c87c9;
        color: #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Example, where each side has own value.</p>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства border-style со всеми значениями:

Пример свойства CSS border-style со значениями hidden, double, solid, dashed, dotted, groove, ridge, inset и outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #eee;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #c9c5c5;
        border: 8px solid #1c87c9;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-style example classes */
      .b1 {
        border-style: hidden;
      }
      .b2 {
        border-style: dotted;
      }
      .b3 {
        border-style: dashed;
      }
      .b4 {
        border-style: solid;
      }
      .b5 {
        border-style: double;
      }
      .b6 {
        border-style: groove;
      }
      .b7 {
        border-style: ridge;
      }
      .b8 {
        border-style: inset;
      }
      .b9 {
        border-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание	Попробуй
none	Рамка не отображается. Значение по умолчанию.	Попробуй »
hidden	То же, что и «none», за исключением разрешения конфликтов рамок для элементов таблицы.	Попробуй »
dotted	Рамка задаётся как серия точек.	Попробуй »
dashed	Рамка задаётся как серия штрихов.	Попробуй »
solid	Рамка задаётся как сплошная линия.	Попробуй »
double	Рамка задаётся как двойная сплошная линия.	Попробуй »
groove	3D-рамка с эффектом канавки, создающая впечатление, что рамка вырезана. Противоположность ridge.	Попробуй »
ridge	Задаёт 3D-рамку с эффектом выступа, создающую впечатление рельефной поверхности. Противоположность groove.	Попробуй »
inset	3D-эффект, создающий впечатление, что элемент утоплен. Противоположность outset.	Попробуй »
outset	3D-эффект, создающий впечатление, что элемент выпуклый. Противоположность inset.	Попробуй »
initial	Устанавливает свойство в значение по умолчанию.	Попробуй »
inherit	Наследует свойство от родительского элемента.

Частые подводные камни

Без стиля — нет рамки. При border-style: none (значение по умолчанию) свойства border-width и border-color не имеют видимого эффекта. Всегда задавайте стиль.
hidden и none. Визуально они выглядят одинаково для обычных блоков. Разница проявляется только в таблицах: при разрешении конфликтов рамок hidden имеет приоритет и подавляет рамку соседней ячейки, тогда как none обладает наименьшим приоритетом.
groove, ridge, inset и outset требуют цветной рамки с несколькими пикселями. Их 3D-иллюзия строится на более светлых и тёмных оттенках border-color, поэтому используйте ширину не менее 2px–4px и избегайте чисто чёрного или белого цвета.
Изменение только border-style сохраняет размер блока, поскольку ширина остаётся неизменной — это удобно для состояний наведения/фокуса, когда dashed меняется на solid без смещения макета.

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

border — задаёт ширину, стиль и цвет в одном объявлении.
border-width и border-color — два других компонента рамки.
border-radius — скругляет углы стилизованной рамки.
outline-style — те же стили линий для контуров (которые находятся снаружи рамки и не влияют на макет).

Почему это важно

Как работает сокращённая запись от одного до четырёх значений

Синтаксис

Пример свойства border-style:

Пример свойства border-style, где каждая сторона имеет своё значение:

Результат

Пример свойства border-style со всеми значениями:

Значения

Частые подводные камни

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

Практика