CSS border-left-style Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

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
Edge Chrome Firefox Opera Safari
12119.21
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
181414112.2

Last updated by CSSPortal on: 31st December 2023