Свойство CSS border-left-color
Свойство 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"; |
Синтаксис
Синтаксис свойства CSS border-left-color
border-left-color: color | transparent | initial | inherit;Пример использования свойства border-left-color:
Пример свойства CSS border-left-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.
Пример свойства border-left-color со значением "transparent":
Пример свойства CSS border-left-color со значением 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>INFO
В качестве значения для свойства border-left-color можно использовать шестнадцатеричные коды, RGB, RGBA, HSL, HSLA или названия цветов.
Пример свойства border-left-color со значением цвета по имени:
Пример свойства CSS border-left-color со значением darkred
<!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>Пример свойства border-left-color со шестнадцатеричным значением:
Пример свойства CSS border-left-color со шестнадцатеричным значением
<!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>Пример свойства border-left-color со значением RGB:
Пример свойства CSS border-left-color со значением 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>Пример свойства border-left-color со значением HSL:
Пример свойства CSS border-left-color со значением 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-left-color' в CSS согласно информации на странице?