CSS-свойство border-left
Свойство CSS border-left задаёт ширину, стиль и цвет левой границы элемента одним объявлением. Примеры и значения.
CSS-свойство border-left задаёт ширину, стиль линии и цвет левой границы элемента в одном объявлении.
Оно является сокращением для трёх полных свойств:
- border-left-width — толщина границы (например,
2px,thin,medium,thick). - border-left-style — стиль линии (например,
solid,dotted,dashed,double,ridge). - border-left-color — цвет линии.
Зачем использовать border-left
Используйте border-left, когда нужна граница только на левом крае элемента, а не со всех четырёх сторон. Это распространённый приём для блоков-цитат, боковых панелей, индикаторов навигации и «выносных» блоков, где одна акцентная линия отмечает левую сторону блока. Поскольку это сокращённое свойство, оно короче, чем запись трёх отдельных свойств, а также сбрасывает пропущенные значения обратно к значениям по умолчанию.
Как работают значения
Три значения можно записывать в любом порядке, одно или два из них можно опустить:
- Если опустить цвет, граница использует свойство элемента color — то есть тот же цвет, что и у текста (ключевое слово
currentColor). - Если опустить ширину, по умолчанию используется
medium(примерно 3–4 пикселя, в зависимости от браузера). - Если опустить стиль, по умолчанию используется
none, что означает граница вообще не отрисовывается — например, объявлениеborder-left: 5px blue;ничего не показывает. Стиль — это то значение, которое почти всегда нужно указывать.
| Начальное значение | 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 и левой границей ridge. Обратите внимание, что стили ridge, groove, inset и outset получают трёхмерное затенение из цвета границы, поэтому они лучше всего смотрятся на контрастном фоне.
Пример свойства 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 — это физическое свойство: оно всегда затрагивает левый край, независимо от направления текста. Если нужно, чтобы граница следовала за началом текста (левый край в языках с написанием слева направо, правый край в языках с написанием справа налево), вместо него используйте логическое свойство border-inline-start. Для большинства макетов с текстом слева направо оба свойства ведут себя одинаково, но логические свойства позволяют макету автоматически адаптироваться при смене направления.
Значения
Сокращённое свойство border-left принимает значения трёх своих полных свойств, а также общие ключевые слова CSS:
| Значение | Описание |
|---|---|
| border-left-width | Задаёт ширину левой границы элемента. Значение по умолчанию — «medium». Обязательное значение. |
| border-left-style | Задаёт стиль линии левой границы элемента. Значение по умолчанию — «none». Обязательное значение. |
| border-left-color | Задаёт цвет левой границы элемента. По умолчанию используется текущий цвет текста. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |