w3docs logo

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

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

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

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

Браузеры отображают стили по разному. Например, Chrome отображает не круглые, а прямоугольные точки.

Данная спецификация не устанавливает каким должно быть расстояние между точками и пунктирами.
Данная спецификация не устанавливает как соединяются границы разных стилей в углах.
Значение по умолчанию none
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.borderLeftStyle = "solid";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      border-left-style: solid;
      }
      div {
      border-left-style: dotted;
      }
    </style>
  </head>
  <body>
    <p> Пример с solid border-left-style.</p>
    <div>Пример с dotted border-left-style.</div>
  </body>
</html>

Пример, где все значения стиля используются раздельно для того, чтобы увидеть разницу между ними.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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>
    <h2>Примеры значения border-left-style</h2>
    <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 за исключением применения border-left-style к ячейкам таблицы.
dotted Точечная граница.
dashed Пунктирная граница.
double Двойная граница.
solid Сплошная граница.
groove Отображает границы с 3D groove эффектом. Эффект может быть изменен с помощью значения border-color.
ridge Отображает границы с 3D ridge эффектом. Эффект может быть изменен с помощью значения border-color.
inset Отображает границы с 3D inset эффектом. Эффект может быть изменен с помощью значения border-color.
outset Отображает границы с 3D outset эффектом. Эффект может быть изменен с помощью значения border-color.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
1+ 1+ 1+ 9.2+

Практикуйте свои знания

Какие значения можно установить для CSS свойства border-left-style?
Считаете ли это полезным?