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

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

Это сокращенное свойство для установления таких значений, как border-left-width, border-left-style и border-left-color.

Эти три значения сокращенного свойства могут быть установлены в любом порядке, или же одно или две значения могут быть пропущены. Если цвет не установлен, значение будет выбрано из свойства color. Если свойство color не установлено, будет выбран текущий цвет по умолчанию. Если свойство width не установлено, будет выбран средний размер элемента.

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

Синтаксис

border-left: border-width border-style border-color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      border-left: 3px solid #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2> Пример border-left</h2>
    <div> Пример свойства border-left.</div>
  </body>
</html>

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

Свойство border-left может быть применено к разным элементам.

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1, p, div {
      padding: 10px;
      }
      h1 {
      border-left: 5px solid #8ebf42;
      }
      p {
      border-left: 4px dotted #1c87c9;
      }
      div {
      border-left: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок с левой границей solid green</h1>
    <p>Заголовок с левой границей dotted blue.</p>
    <div>div элемент с левой границей thick double.</div>
  </body>
</html>

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

Можно создать блок с <div> элементом, установить background-color для блока и левой границы.

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border-left: 20px ridge #8ebf42;
      background-color: #ccc;
      height: 100px;
      width: 200px;
      font-weight: bold;
      text-align: center;
      padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p> Блок имеет границу ridge с левой стороны.</p>
    </div>
  </body>
</html>

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

Значения

Значение	Описание
border-left-width	Устанавливает толщину левой границы элемента. Значение по умолчанию - "medium". Необходимое значение.
border-left-style	Устанавливает стиль линии левой границы элемента. Значение по умолчанию - "none". Необходимое значение.
border-left-color	Устанавливает цвет левой границы элемента. Значение по умолчанию - текущий цвет текста.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.