Свойство CSS border-left-color
Свойство border-left-color задаёт цвет левой границы элемента. Все значения свойства с примерами.
Свойство CSS border-left-color задаёт цвет левой границы элемента. Оно управляет только цветом — чтобы граница была видна, также необходимо указать стиль и ширину.
На этой странице рассматривается синтаксис border-left-color, объясняется, почему для отображения границы требуется стиль, и приводятся рабочие примеры для всех типов значений цвета (именованные цвета, hex, RGB, HSL и transparent).
Почему необходим стиль границы
Граница состоит из трёх компонентов: стиля, ширины и цвета. По умолчанию стиль границы равен none, то есть браузер вообще не рисует границу — поэтому установка только border-left-color не даёт видимого результата.
Чтобы левая граница отобразилась, сначала задайте стиль с помощью border-style или border-left-style, а затем примените цвет:
.box {
border-left-style: solid; /* required, otherwise the border is invisible */
border-left-width: 4px; /* optional; defaults to medium */
border-left-color: #1c87c9;
}Если нужно задать цвет также для верхней, правой и нижней границ, сокращённое свойство border-color устанавливает все четыре стороны сразу. Ширина управляется отдельно с помощью border-width или border-left-width (значение ширины по умолчанию — medium).
Начальное значение — currentColor, то есть до тех пор, пока вы не зададите цвет, граница принимает значение свойства color самого элемента.
Сводка свойства
| Начальное значение | currentColor |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимируется | Да. Цвет левой границы поддаётся анимации. |
| Версия | CSS1 |
| DOM Syntax | object.style.borderLeft = "1px solid black"; |
Синтаксис
border-left-color: color | transparent | initial | inherit;Примеры
Отличный цвет левой границы
Этот пример рисует сплошную границу со всех сторон с помощью border-color, а затем переопределяет только левую сторону, чтобы она выделялась:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-left-color example</h2>
<div>Example for the border-left-color property with different left border color.</div>
</body>
</html>Результат:
Использование значения «transparent»
Прозрачная левая граница (transparent) невидима, но по-прежнему занимает пространство, определённое шириной границы. Это удобно для выравнивания макетов или для создания эффектов, появляющихся при наведении:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px ridge #8ebf42;
border-left-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent left border</h2>
</body>
</html>Цвет можно задать как именованный цвет, шестнадцатеричный код или значение rgb(), rgba(), hsl() или hsla(). В примерах ниже показаны наиболее распространённые форматы.
Именованное значение цвета
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: darkred;
}
</style>
</head>
<body>
<div>Border-left-color property with a named color value.</div>
</body>
</html>Шестнадцатеричное значение
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-left-color property with a hexadecimal value.</div>
</body>
</html>Значение RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-left-color property with a RGB value.</div>
</body>
</html>Значение HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-left-color property with a HSL value.</div>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| color | Определяет цвет левой границы. Цвет по умолчанию — цвет текущего элемента. Можно использовать именованные цвета, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). Обязательное значение. | Попробовать » |
| transparent | Применяет прозрачный цвет к левой границе. Левая граница по-прежнему будет занимать пространство, определённое значением border-width. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
- border-color — сокращение для цветов всех четырёх границ
- border-left-style — задаёт стиль левой границы (необходим для отображения цвета)
- border-left-width — задаёт ширину левой границы
- border-right-color, border-top-color, border-bottom-color — цвет остальных сторон