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.