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

Свойство CSS border-left-width задаёт ширину (толщину) левой границы элемента. Это аналог border-width для одной стороны, позволяющий управлять только левым краем, не затрагивая верхнюю, правую и нижнюю границы.

Ширину левой границы — как и любой другой стороны — можно также задать с помощью сокращённых свойств border или border-width. Используйте border-left-width, когда нужно оформить только левый край: это распространённый приём для боковых панелей, блочных цитат и «полос-выносок» сбоку элемента.

Почему граница должна существовать заранее

Ширина границы сама по себе не даёт видимого эффекта. Браузер отрисовывает границу только при условии, что задан border-style (по умолчанию стиль равен none), поэтому объявление вроде border-left-width: thick; ничего не делает, пока не определён стиль. Задайте его с помощью border-left-style или сокращённого свойства border-style:

/* width alone — nothing renders, because the style is still `none` */
.box {
  border-left-width: thick;
}

/* correct — a style is present, so the 5px left border is painted */
.box {
  border-left-style: solid;
  border-left-width: 5px;
  border-left-color: teal;
}

То же относится к цвету: если не указать border-left-color, граница использует currentColor элемента (цвет его текста).

Информация

Спецификация не определяет точную толщину для каждого ключевого слова. Однако они всегда подчиняются порядку: thin ≤ medium ≤ thick.

Информация

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

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

Синтаксис

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

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

Пример свойства border-left-width со значением «thick»:

Пример свойства CSS border-left-width со значением thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 10px;
        border-style: dashed;
        border-left-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-left-width example</h2>
    <p>As you can see the width of the left border is set to thick.</p>
  </body>
</html>

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

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

Пример свойства CSS border-left-width со значениями medium, thin, thick, px, initial и inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>
    <h1>Border-left-width value examples</h1>
    <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>
  </body>
</html>

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

Результат

![Свойство CSS border-left-width](/uploads/media/default/0001/03/6406dd863a4db0df218023217fcf17f182a53660.png "CSS border-left-width Property" =420x)

Значения

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

Информация

Процентные значения не допускаются для ширины границ — border-left-width: 50% недопустимо и объявление игнорируется. Используйте фиксированную длину (px, em, rem) или одно из ключевых слов.

Что важно помнить

Стиль обязателен. Ширина и цвет не дают эффекта, пока border-style не установлен в значение, отличное от none.
Толщина ключевых слов определяется браузером. Значения thin, medium и thick не имеют фиксированных пиксельных значений в спецификации; гарантируется только порядок thin ≤ medium ≤ thick. Для точного контроля используйте конкретную длину.
Влияет на макет. Ширина границы добавляется к отрисованному размеру элемента, если только box-sizing не равен border-box — в этом случае граница рисуется внутри заданной ширины.
Анимируется. Значение можно плавно изменять и анимировать, что делает border-left-width удобным для эффектов наведения с полосой.

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

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

Практика

Какие из перечисленных значений можно использовать со свойством border-left-width в CSS?

Значения длиныПроцентные значенияInheritInitialAuto