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

Схожие ссылки

Border, border-left-width, border-left-style, border-left-color.

Browser support

1+ 4+ 1+ 3.5+ 1+



Related articles