CSS border-left-style Property

Description

The CSS property border-left-style determines how the left edge of an element’s border is rendered - whether it is drawn at all and, if drawn, what visual pattern or treatment is used. It targets only the left side of the element’s border box, leaving the other three edges unaffected unless their own style properties are set. This property is purely visual: it controls the appearance of the left border independently from its thickness or color, which are controlled by other border properties.

In practical use it is often combined with the longhand border-left shorthand or with the overall border shorthands to express a complete border on one side or the whole perimeter. When both longhand and shorthand are applied, the longhand settings for a specific side take precedence for that side. The final rendered left border is the result of three cooperating properties: the style set by this property, the thickness from border-width, and the color from border-color; changing any one of those alters the visible outcome.

Rendering behavior and layout implications are important to consider. A style that results in no visible stroke effectively removes the left border from view even if width and color are specified, and very thin widths or particular style patterns can appear differently on high-DPI screens because of pixel snapping and anti-aliasing. The border occupies the element’s border box; how that box contributes to the element’s total size depends on the box sizing model in use, so be aware of box-sizing when sizing elements that include borders.

For interactive and accessible design, prefer using border-style changes thoughtfully: abrupt switches between different style types may not animate smoothly, so if you want animated transitions consider animating color or width instead. Use border styles to provide meaningful visual affordances (for example, distinguishing focus or active states), and when you need an effect that should not affect layout or sizing, consider alternatives such as outline or box-shadow. Finally, keep in mind that frequent changes to border painting can force repaints, so minimize layout thrashing for smoother performance.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.borderLeftStyle

Interactive Demo

border-left-style: none;

border-left-style: dotted;

border-left-style: dashed;

border-left-style: solid;

border-left-style: double;

border-left-style: groove;

border-left-style: inset;

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

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

HTML

<main>

  <h2>border-left-style examples</h2>

  <div class="examples">

    <div class="example solid">

      <span class="label">solid</span>

    </div>

    <div class="example dashed">

      <span class="label">dashed</span>

    </div>

    <div class="example dotted">

      <span class="label">dotted</span>

    </div>

    <div class="example double">

      <span class="label">double</span>

    </div>

    <div class="example groove">

      <span class="label">groove</span>

    </div>

    <div class="example inset">

      <span class="label">inset</span>

    </div>

    <div class="example outset">

      <span class="label">outset</span>

    </div>

    <div class="example none">

      <span class="label">none</span>

    </div>

    <div class="example hidden">

      <span class="label">hidden</span>

    </div>

  </div>

</main>

CSS

/* Basic layout */
main {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  max-width: 680px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Examples grid */
.examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

/* Example card */
.example {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  background: #fbfbfb;
  border-radius: 6px;
  border-left-width: 8px;
  border-left-color: #2563eb;
  box-shadow: 0 1px 0 rgba(16,24,40,0.04);
}

/* Labels */
.label {
  font-weight: 600;
  color: #0f172a;
}

/* Different left border styles */
.example.solid  { border-left-style: solid; }
.example.dashed { border-left-style: dashed; }
.example.dotted { border-left-style: dotted; }
.example.double { border-left-style: double; }
.example.groove { border-left-style: groove; }
.example.inset  { border-left-style: inset; }
.example.outset { border-left-style: outset; }
.example.none   { border-left-style: none; }
.example.hidden { border-left-style: hidden; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-left-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.