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

Свойство CSS border-left-style задаёт стиль левой границы элемента. Оно принимает одно ключевое слово из того же набора значений, что доступны сокращённому свойству border-style. В отличие от border-style, задающего стиль всех четырёх сторон одновременно, border-left-style воздействует только на левый край.

Это свойство используется совместно с border-left-width и border-left-color, либо все три можно задать сразу с помощью сокращённого свойства border-left. Граница видна только тогда, когда её стиль отличается от значения по умолчанию none — даже широкая граница с ярким цветом не отображается, пока не задан стиль.

Ширина левой границы по умолчанию равна medium. Изменить её можно с помощью border-left-width или border-width.

Не все браузеры отображают одинаковые стили идентично. Например, Chrome рисует точки границы dotted в виде маленьких квадратов, а не кружков, а 3D-значения (groove, ridge, inset, outset) зависят от цвета границы для создания эффекта света и тени.

Информация

Спецификация не определяет расстояние между точками и штрихами.

Информация

Спецификация не определяет, как соединяются границы разных стилей в углах.

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

Синтаксис

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

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

Пример использования свойства border-left-style:

Пример CSS border-left-style с значениями solid и dotted

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-left-style: solid;
      }
      div {
        border-left-style: dotted;
      }
    </style>
  </head>
  <body>
    <p> Example with solid border-left-style.</p>
    <div>Example with dotted border-left-style.</div>
  </body>
</html>

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

Информация

В зависимости от значения border-color эффект значений groove, ridge, inset и outset может меняться.

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #c9c5c5;
        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: #8ebf42;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-left-style example classes */
      .b1 {
        border-left-style: hidden;
      }
      .b2 {
        border-left-style: dotted;
      }
      .b3 {
        border-left-style: dashed;
      }
      .b4 {
        border-left-style: solid;
      }
      .b5 {
        border-left-style: double;
      }
      .b6 {
        border-left-style: groove;
      }
      .b7 {
        border-left-style: ridge;
      }
      .b8 {
        border-left-style: inset;
      }
      .b9 {
        border-left-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-left-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	Задаёт пунктирную границу (штрихи).
double	Задаёт двойную границу.
solid	Задаёт сплошную границу.
groove	Задаёт трёхмерную рельефную границу (жёлоб). Эффект может меняться в зависимости от значения border-color.
ridge	Задаёт трёхмерную рельефную границу (гребень). Эффект может меняться в зависимости от значения border-color.
inset	Задаёт трёхмерную утопленную границу. Эффект может меняться в зависимости от значения border-color.
outset	Задаёт трёхмерную выпуклую границу. Эффект может меняться в зависимости от значения border-color.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Когда использовать

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

Практика

Какие значения может принимать свойство 'border-left-style' в CSS?