CSS border-left-style Property
Description
The border-left-style
CSS property is used to specify the style of the left border of an element, such as a div or a paragraph, within a web page. This property allows you to define the visual appearance of the left border by choosing from various styles, including options like "solid" for a continuous line, "dashed" for a series of short dashes, "dotted" for a series of small dots, and others. By setting the "border-left-style," you can customize the border's appearance to achieve the desired visual effect, enhancing the overall design and layout of your webpage.
- Initial value
- none
- Applies to
- All elements
- Inherited
- No
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.borderLeftStyle
Interactive Demo
Syntax
border-left-style: <line-style>
Values
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset- noneBorder is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn.
- hiddenSame as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
- dottedA series of round dots.
- dashedA series of square-ended dashes.
- solidA single line segment.
- doubleTwo parallel solid lines with some space between them.
- grooveDisplays a border leading to a carved effect. It is the opposite of ridge.
- ridgeLooks as if it were coming out of the canvas.
- insetLooks as if the content on the inside of the border is sunken into the canvas.
- outsetLooks as if the content on the inside of the border is coming out of the canvas.
- inherit
Example
<div class="border">This is an example of the border-left-style property using a red solid border 3px in width.</div>
.border {
border: 1px solid blue;
border-left-style: solid;
border-left-width: 3px;
border-left-color: red;
margin: 20px;
padding: 20px;
}
Browser Support
The following table will show you the current browser support for the CSS border-left-style
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 9.2 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 14 | 14 | 1 | 1 | 2.2 |
Last updated by CSSPortal on: 31st December 2023