PUBLISHED ON: APRIL 15, 2021
CSS border-left property
The border-left property in CSS asserts all the properties of the left border of an element. This property sets the ones which are not specified to their default values. Not specifying the border-style results in no border because the default value of border-left-style is none.
The border-left property is a shorthand property for three other CSS properties namely- border-left-color, border-left-style and border-left-width.
Syntax for border-left property in CSS
Following is the syntax for the border-left property.
border-left: border-width border-style border-color|initial|inherit;
Example: CSS border-left property
Here in the example below, we are using the border-left property with different border styles, colors and their different values. In this case, we have given the border-left value as 4 px dashed blue. This means that there will be a border in blue color in a dashed fashion.
<!DOCTYPE html>
<html>
<head>
<title>Border-left property in CSS</title>
<style type="text/css">
div {
border-left: 4px dashed blue;
background-color: red;
height: 110px;
width: 110px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>This box has a border on the left side.</div>
</body>
</html>
Output:
Example 2: CSS border-left property
Here in the example below, we are using the border-left property with different border styles, colors and their different values. In this case, we have given the border-left value as 8 px dashed green. This means that there will be a border in green color in a dashed fashion.
<!DOCTYPE html>
<html>
<head>
<title>Border-left property in CSS</title>
<style type="text/css">
div {
border-left: 8px dashed green;
background-color: red;
height: 110px;
width: 110px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>This box has a border on the left side.</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that 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 |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-left is medium. This property is applicable to all elements. and also to the ::first-letter. The computed value of this property is different as each of the properties of the shorthand.
