CSS border-left-style Property

The border-left-style property sets the line type of an element's left border. It determines whether the border is solid, dashed, dotted, or completely invisible.

selector { border-left-style: value; }
none Specifies that no border should be rendered on the left side.
hidden Similar to none, used primarily to resolve border conflicts in table elements.
dotted Renders the left border as a series of round dots.
dashed Renders the left border as a series of short line segments.
solid Renders the left border as a single continuous solid line.
double Renders the left border as two parallel solid lines.
groove Renders a 3D grooved border that looks carved into the page surface.
ridge Renders a 3D ridged border that looks embossed or extruded.
inset Renders a 3D inset border that makes the element look sunken into the page.
outset Renders a 3D outset border that makes the element look raised from the page.

Code Examples

A basic example showing how to create a solid accent line on the left side of a container.

<div style="border-left-width: 5px; border-left-style: solid; border-left-color: #007bff; padding-left: 15px;">
  This div has a solid blue left border acting as a simple accent.
</div>

A more advanced example using a blockquote-style callout and JavaScript to dynamically toggle the border style and color.

<style>
  .callout {
    padding: 20px;
    background-color: #f8f9fa;
    border-left-width: 10px;
    border-left-color: #28a745;
    border-left-style: solid;
    transition: border-left-style 0.3s;
  }
</style>

<div id="quoteBox" class="callout">
  "The best way to predict the future is to invent it."
</div>

<button onclick="toggleStyle()">Change Style</button>

<script>
  function toggleStyle() {
    const box = document.getElementById("quoteBox");
    if (box.style.borderLeftStyle === "dashed") {
      box.style.borderLeftStyle = "solid";
      box.style.borderLeftColor = "#28a745";
    } else {
      box.style.borderLeftStyle = "dashed";
      box.style.borderLeftColor = "#ffc107";
    }
  }
</script>

Pro Tip

If you want to create a quick vertical separator between navigation links in a horizontal list, apply "border-left-style: solid" to all items except the first one using the ":not(:first-child)" pseudo-class. This keeps your layout tight without needing extra DIVs or SPANs as dividers in your HTML markup.

Deep Dive

Think of this property like choosing the pattern for a single strip of wallpaper on the left edge of a room's wall. While you can set the thickness and color, the style defines the physical texture of that line. By default, it is set to "none", meaning the border is invisible regardless of any width or color you apply. To see anything at all, you must define a style other than "none" or "hidden". This property is part of the box model and only affects the left side of the element's perimeter, allowing for specific architectural styling like side-accents for callouts or sidebar separators. When using 3D styles like "groove" or "inset", the browser uses the "border-left-color" to calculate the highlight and shadow colors needed to create the effect.

Best Practices

Always pair border-left-style with border-left-width and border-left-color for full control, or use the shorthand "border-left" property to keep your code clean. If you only need a divider between sidebar content and a main section, using just the left border is more efficient than styling all four sides and then zeroing out three of them. Stick to "solid", "dashed", or "dotted" for modern, flat UI designs, as the 3D values like "ridge" and "groove" can look dated in contemporary web applications.

Common Pitfalls

The biggest headache for beginners is setting a "border-left-width" and color but seeing nothing on the screen. This happens because the default style is "none". You have to explicitly set a style like "solid" for the border to actually render. Also, remember that "hidden" behaves similarly to "none" but has different implications in table element border collapsing, where "hidden" will take precedence over other conflicting borders.

Accessibility

Ensure that the contrast between the border color and the background is high enough for users with visual impairments to distinguish the boundary. Do not rely on border style alone (like dashed vs solid) to convey critical information or state changes, as some users may have difficulty perceiving fine decorative details. Borders should be used to support the visual structure, not as the sole indicator of meaning.

Dev Data Table: border-left-style property

default none
animatable no
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.borderLeftStyle = "solid";
js_syntax_2 element.style.setProperty("border-left-style", "dashed");
js_note When manipulating this property in JavaScript, ensure the element also has a defined border width and color for the style to be visible.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }
results render here...