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 Значение элемента наследуется от родительского элемента.

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

1+ 1+ 1+ 3.5+




Похожие статьи