X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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

CSS свойство border-left-color устанавливает цвет левой границы элемента.

Цвет левой границы, вместе с цветами верхней, правой и нижней границы, может быть также установлен сокращенным свойством border-color.

При использовании свойства border-left-color необходимо сначала установить свойство border-style или border-left-style и дальше изменить цвет установленного стиля.

Толщина границы по умолчанию - medium. Толщину можно установить используя свойство border-width или border-left-width.

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

Синтаксис

border-left-color: color | transparent | initial | inherit;

Пример

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      h2 {
      padding: 3px; 
      text-align: center;   
      border: 15px ridge  #8ebf42;
      border-left-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок с transparent left border</h2>
  </body>
</html>

Hexadecimal, RGB, RGBA, HSL, HSLA или название цвета может быть применен как значение для свойства border-left-color .

Пример CSS border-left-color , где значением является название цвета:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 3px;
      border-left-style: solid; 
      border-left-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Свойство border-left-color с значением названия цвета.</div>
  </body>
</html>

Пример, где установлено значение hexadecimal для свойства border-left-color:

Пример

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

Пример с border-left-color , где используется значение RGB:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 3px;
      border-left-style: solid; 
      border-left-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Свойство border-left-color с значением RGB.</div>
  </body>
</html>

Пример с border-left-color , где используется значение HSL:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 3px;
      border-left-style: solid; 
      border-left-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <div>Свойство border-left-color с значением HSL.</div>
  </body>
</html>

Значения

Значение Описание
color Устанавливает цвет левой границы. Цвет по умолчанию - цвет текущего элемента. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). Необходимое значение.
transparent Устанавливает прозрачный цвет левой границы. Левая граница может занять место, установленное значением border-width.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

1+ 1+ 1+ 3.5+


Считаете ли это полезным?

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