CSS-свойство `border-left-width`
Базовый уровень Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
CSS-свойство border-left-width задаёт ширину левой границы элемента.
Попробуйте
border-left-width: thick;
border-left-width: 2em;
border-left-width: 4px;
border-left-width: 2ex;
border-left-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
Синтаксис
/* Keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* Global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: revert; border-left-width: revert-layer; border-left-width: unset;
Значения
-
<line-width> - Задаёт ширину границы: неотрицательным значением
<length>или одним из ключевых слов:thin,mediumилиthick. Значение по умолчанию —medium.
Формальное определение
| Исходное значение | medium |
|---|---|
| Применяется к | всем элементам |
| Наследуется | нет |
| Вычисленное значение | абсолютное значение <length>, округлённое до ширины линии |
| Тип анимации | a <a href="/en-US/docs/Web/CSS/Reference/Values/length#interpolation" title="Values of the <length> CSS data type are interpolated as real, floating-point numbers.">length</a> |
Формальный синтаксис
border-left-width = <line-width> <line-width> = <length> | thin | medium | thick
Примеры
Сравнение ширины границ
HTML
<div>Element 1</div> <div>Element 2</div>
CSS
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-left-width: thick;
}
div:nth-child(2) {
border-left-width: 2em;
}
Результат
Спецификации
| Спецификация |
|---|
| Модуль фонов и границ CSS уровня 3 # border-width |
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
border-left-width |
1 |
12 |
1 |
3.5 |
1 |
18 |
4 |
10.1 |
1 |
1.0 |
2.2 |
1 |
medium |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
thick |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
thin |
1 |
12 |
1 |
15 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
См. также
- Другие CSS-свойства, связанные с шириной границ:
border-top-width,border-right-width,border-bottom-widthиborder-width. - Другие CSS-свойства, связанные с левой границей:
border,border-left,border-left-styleиborder-left-color.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-left-width
