PUBLISHED ON: APRIL 15, 2021
CSS border-left-style property
The border-left-style property in CSS is identified to set the line style of the left border of a specific element. This property is specified as a single keyword that is chosen from the ones available for the border-style property.
Note: The specification of the property does not determine how the borders of different styles get connected in the corners.
Syntax for border-left-style property:
Following is the syntax for the border-left-style property.
border-left-style: none| hidden| dotted| dashed| solid| double |
groove| ridge| inset| outset| initial| inherit;
Example: CSS border-left-style property
Here in the example below, we are using the border-left-style property with different border styles, colors, and their different values. In this case, we have given different types of value for the border-left-style property. This means that there will be a left border in the specified style according to the specified colors.
<!DOCTYPE html>
<html>
<head>
<title>Border-left-style property in CSS</title>
<style type="text/css">
table {
border-width: 4px;
background-color: #f8f0f0;
}
tr, td {
padding: 3px;
}
.b1 {border-left-style: none;}
.b2 {border-left-style: hidden;}
.b3 {border-left-style: dotted;}
.b4 {border-left-style: dashed;}
.b5 {border-left-style: solid;}
.b6 {border-left-style: double;}
.b7 {border-left-style: groove;}
.b8 {border-left-style: ridge;}
.b9 {border-left-style: inset;}
.b10 {border-left-style: outset;}
</style>
</head>
<body>
<table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table>
</body>
</html>
Output:
Example 2: CSS border-left-style property
Here in the example below, we are using the border-left-style property with different border styles, colors, and their different values. In this case, we have given the value for the border-left-style property as none. This means that there will be no left border for the container.
<!DOCTYPE html>
<html>
<head>
<title>Border-left-style property in CSS</title>
<style type="text/css">
.border-box{
width: 220px;
height: 220px;
}
div{
background-color: red;
border-style: dotted;
border-left-style: none;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight is the best platform to learn digital courses in a soi plified way !</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 |
5.5 |
5.5 |
| Opera |
9.2 |
9.2 |
| Safari |
1 |
1 |
| Webview Android |
2.3 |
2.3 |
| Chrome Android |
18 |
18 |
| Firefox Android |
14 |
14 |
| Opera Android |
14 |
14 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-left-style property in CSS is none. This property is applicable to all elements and also applicable to the ::first-letter. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
