Свойство CSS border-left
Свойство CSS border-left используется для установки ширины, стиля и цвета левой границы элементов.
Это сокращённое свойство для указания следующих значений:
Три значения этого сокращённого свойства можно указывать в любом порядке, при этом одно или два из них могут отсутствовать.
Если цвет не указан, значение будет взято из свойства color. Если свойство color не определено, по умолчанию будет использоваться текущий цвет.
Если width не указан, будет использоваться значение medium (средний размер).
| Начальное значение | medium none currentColor |
|---|---|
| Применяется ко | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимация | Да. Цвет и ширина границы анимируются. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.borderLeft = "1px solid black"; |
Синтаксис
Синтаксис border-left
border-left: border-width border-style border-color | initial | inherit;Пример использования свойства border-left:
Пример свойства CSS border-left со значением solid
<!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 example</h2>
<div> This is a simple example for the border-left property.</div>
</body>
</html>Результат
Пример применения свойства border-left к различным элементам:
Пример свойства CSS border-left со значениями dotted, double и solid
<!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>A heading with a solid green left border</h1>
<p>A heading with a dotted blue left border.</p>
<div>A div element with a thick double left border.</div>
</body>
</html>Создайте блок с помощью элемента <div>, задайте для него background-color и левую границу.
Пример свойства border-left с элементом <div>:
Пример свойства CSS border-left со значением ridge
<!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>This box has a ridge border on the left side.</p>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| border-left-width | Задаёт ширину левой границы элемента. Значение по умолчанию — "medium". Обязательное значение. |
| border-left-style | Задаёт стиль линии левой границы элемента. Значение по умолчанию — "none". Обязательное значение. |
| border-left-color | Задаёт цвет левой границы элемента. Значение по умолчанию — текущий цвет текста. |
| initial | Устанавливает свойству его значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает свойство border-left в CSS?