PUBLISHED ON: APRIL 15, 2021
CSS border-left-width property
The border-left-width property in CSS is identified to set the width of the left border of a specific element. The line-width property determines the width of the border, either as a keyword or an explicit nonnegative length. In case it is a keyword, then it must be any of these values such as thin, medium, or thick.
Syntax for border-left-width property
Following is the syntax for the border-left-width property.
border-left-width: medium|thin|thick|length|initial|inherit;
Example: CSS border-left-width property
Here in the example below, we are using the border-left-width property with different border widths, styles, colors, and their different values. In this case, we have given different types of values for the border-left-width property. This means that there will be a left border in the specified width according to the specified colors.
<!DOCTYPE html>
<html>
<head>
<title>Border-left-width property in CSS</title>
<style type="text/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;
}
</style>
</head>
<body>
<div>Border with a thick value</div>
<div>Border with a length value</div>
</body>
</html>
Output:
Example 2: CSS border-left-width property
Here in the example below, we are using the border-left-width property with different border widths, styles, colors and their different values. In this case, we have given the value for the border-left-width property as none. This means that there will be no left border of the container.
<!DOCTYPE html>
<html>
<head>
<title>Border-left-width property in CSS</title>
<style type="text/css">
div {
border: 1px solid green;
margin: 1em 0;
}
div:nth-child(1) {
border-left-width: 2ex;
}
div:nth-child(2) {
border-left-width: none;
}
</style>
</head>
<body>
<div>Border with a length value</div>
<div>Border with a 'none' value</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
2.3 |
2.3 |
| Chrome Android |
18 |
18 |
| Firefox Android |
14 |
14 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-left-width property is medium. This property is applicable to all elements. It is also applicable to the ::first-letter. It is not an inherited property. The computed value for this property is the absolute length or zero in case the border-left-style is hidden or none. The animation type for this property is a length.
