The CSS ‘border-left-style‘ property specifies the style of an element’s left border. This property enables designers to apply various line styles to the left border of an element, such as solid, dashed, or dotted, creating visual distinction or emphasis on one side of an element.
CSS ‘border-left-style’ Property Examples
See the Pen CSS ‘border-left-style’ Property by Webzstore (@webzstore) on CodePen.
The ‘border-left-style‘ property is a powerful tool for customizing the appearance of an element’s left border, supporting the creation of visually engaging and distinct designs.
Browser Support For ‘border-left-style’ Property
 |  |  |  |  |
| 1.0 | 1.0 | 1.0 | 5.5 | 9.2 |
CSS Syntax of the ‘border-left-style’ Property
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Usage of the ‘border-left-style’ Property
Use ‘border-left-style‘ to define the appearance of the left border of an element. This property is beneficial for adding stylistic details to an element’s border for highlighting, framing, or visually separating content within a layout.
Property Values of the ‘border-left-style’ Property
- None: No border is displayed.
- Hidden: The border is made invisible.
- Dotted: The border is rendered as a series of dots.
- Dashed: The border appears as a series of short lines or dashes.
- Solid: A single, solid line defines the border.
- Double: The border consists of two solid lines with some space between them.
- Groove: The border looks as if it were carved into the surface, creating a grooved effect.
- Ridge: The border protrudes from the surface, giving a ridged effect.
- Inset: The border makes the element look embedded in the page.
- Outset: The border gives the impression that the element stands out from the page.
- Initial: Resets the ‘border-left-style‘ to its default value.
- Inherit: Inherits the ‘border-left-style‘ from the parent element.
Leave a Reply