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>Пример 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+ |
Практикуйте свои знания
