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

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

Толщина левой границы, а также все другие границы, могут быть установлены сокращенным свойством border или border-width. Для установления border-left-width необходимо сначала установить свойство border-style, так как нужны границы, чтобы суметь определить их толщину.

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

Данная спецификация не устанавливает точную толщину каждого ключевого слова, но всегда действует следующая последовательность: thin ≤ medium ≤ thick.

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

Значение по умолчанию	medium
Применяется	Ко всем элементам, а также к ::first-letter.
Наследуется	Нет
Анимируемое	Да. Толщина границы анимируема.
Версия	CSS1
DOM синтаксис	object.style.borderLeftWidth = "4px";

Синтаксис

border-left-width: medium | thin | thick | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      padding: 10px;           
      border-style: dashed;
      border-left-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-left-width</h2>
    <p>Установлена толщина thick для левой границы.</p>
  </body>
</html>

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

Другой пример, где использованы все значения свойств:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #ccc;
      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;
      border: solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-left-width example classes */
      .b1 {border-left-width: medium;}
      .b2 {border-left-width: thin;}
      .b3 {border-left-width: thick;}
      .b4 {border-left-width: 10px;}
      .b5 {border-left-width: initial;}
      .b6 {border-left-width: inherit;}
    </style>
  </head>
  <body>
    <h2>Примеры значения border-left-width</h2>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div  class="b2">
        thin
      </div>
      <div  class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div  class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
    </div>
    </main>
  </body>
</html>

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

Значения

Значение	Описание
medium	Устанавливает толщину medium для левой границы. Является значением по умолчанию для этого свойства.
thin	Устанавливает толщину thin для левой границы. Пользователь может сам установить необходимую толщину.
thick	Устанавливает толщину thick для левой границы. Пользователь может сам установить необходимую толщину.
length	Устанавливает длину левой границы. Например, 10px, 5em, 8pt, и т.д.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.