rick@tillitsdone.com

+66824564755

Scroll to discover

CSS border-left-style Customize Left Border Styles

Learn about the CSS border-left-style property.

Customize the left border of elements with various styles like solid, dotted, dashed, and more.

Enhance your web design.

Introduction

The border-left-style CSS property sets the style of an element’s left border. It’s a handy tool for web designers, allowing them to customize borders to match their website’s style.

Specification

The border-left-style property is defined in the CSS Backgrounds and Borders Module Level 3. It lets you customize the left border with styles like solid, dotted, dashed, double, groove, ridge, inset, and outset.

Syntax

Here’s how you use the border-left-style property in CSS:

/* Keyword values */
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

/* Global values */
border-left-style: inherit;
border-left-style: initial;
border-left-style: revert;
border-left-style: revert-layer;
border-left-style: unset;

Keyword Values Explained

none: No border.
hidden: No border, except in cases of border conflict resolution.
dotted: A series of dots.
dashed: A series of short dashes.
solid: A single, solid line.
double: Two solid lines.
groove: Looks carved into the page (3D effect).
ridge: Looks coming out of the page (3D effect).
inset: Looks embedded in the page (3D effect).
outset: Looks coming out of the page (3D effect).

Global Values Explained

inherit: Inherits the border style from the parent element.
initial: Sets the border style to its default value (none).
revert: Resets the border style to the user agent’s default.
revert-layer: Resets the border style to the value established by the user agent’s stylesheet.
unset: Resets the border style to its natural value.

Usage

To use the border-left-style property, define it in your CSS rule for the desired element. For example:

.element {
  border-left-style: dashed;
}

Formal Definition

The border-left-style property sets the style of an element’s left border. It’s part of the CSS Backgrounds and Borders Module and is essential for defining border appearances.

Initial Value

The initial value is none.

Applies To

Applies to all HTML elements and the ::first-letter pseudo-element.

Inherited

No, it’s not inherited.

Computed Value

The computed value is the same as the specified value.

Animation Type

Supports discrete animations.

Formal Syntax

border-left-style = <line-style>;

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;

Examples

Setting Various Border Styles

Create a table with different border-left-style values to see how they look.

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

CSS

/* Define the look of the table */
table {
  border-width: 2px;
  background-color: #52e385;
}
tr, td {
  padding: 10px;
}

/* border-left-style example classes */
.b1 {
  border-left-style: none;
}
.b2 {
  border-left-style: hidden;
}
.b3 {
  border-left-style: dotted;
}
.b4 {
  border-left-style: dashed;
}
.b5 {
  border-left-style: solid;
}
.b6 {
  border-left-style: double;
}
.b7 {
  border-left-style: groove;
}
.b8 {
  border-left-style: ridge;
}
.b9 {
  border-left-style: inset;
}
.b10 {
  border-left-style: outset;
}

Applying Border Styles to Headings

Apply different border-left-style values to headings for visually appealing section dividers.

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      border-left-style: dotted;
      border-left-width: 5px;
      border-left-color: blue;
      padding-left: 10px;
    }
    h2 {
      border-left-style: double;
      border-left-width: 3px;
      border-left-color: green;
      padding-left: 10px;
    }
    h3 {
      border-left-style: solid;
      border-left-width: 2px;
      border-left-color: red;
      padding-left: 10px;
    }
  </style>
</head>
<body>
  <h1>Dotted Border Heading</h1>
  <h2>Double Border Heading</h2>
  <h3>Solid Border Heading</h3>
</body>
</html>

Create a sidebar with a dashed left border to visually separate it from the main content.

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    .sidebar {
      border-left-style: dashed;
      border-left-width: 2px;
      border-left-color: gray;
      padding-left: 10px;
      width: 200px;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>This is a sidebar with a dashed left border.</p>
  </div>
</body>
</html>

Browser Compatibility

The border-left-style property is widely supported across modern web browsers.

Compatibility Table

Browser	Version	Release Date
Google Chrome	1.0	December 2008
Firefox	1.0	November 2004
Internet Explorer/Edge	5.5	July 2000
Opera	9.2	April 2007
Safari	1.0	June 2003

Cross-Browser Testing for border-left-style

The border-left-style property is widely supported, but it’s always a good idea to test your styles across different browsers to ensure they look the same for everyone.

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    .test-border {
      border-left-style: solid;
      border-left-width: 3px;
      border-left-color: blue;
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="test-border">
    This is a test div with a solid left border.
  </div>
</body>
</html>

Testing Procedure

Open the HTML file in different browsers (Google Chrome, Firefox, Safari, Edge, and Opera).
Check the left border style to make sure it looks the same in all browsers.
Update the CSS if needed to get the desired look in all browsers.

Conclusion

The border-left-style property is a handy tool for making your web pages look great. Since it’s well-supported, you can use it confidently to create engaging web designs. Just remember to test your styles in different browsers to ensure a consistent user experience.

Other Style-Related Border Properties:
- border-bottom-style: Sets the style of the bottom border.
- border-right-style: Sets the style of the right border.
- border-top-style: Sets the style of the top border.
- border-style: Shorthand property for setting the style of all four borders.
Other Left-Border-Related Properties:
- border-left: Shorthand property for setting the width, style, and color of the left border.
- border-left-color: Sets the color of the left border.
- border-left-width: Sets the width of the left border.
CSS Border and Background Module:
- CSS Backgrounds and Borders Module Level 3: Official documentation for the CSS module that defines border and background properties.
Web Design and Development Resources:
- MDN Web Docs: A comprehensive resource for web developers, with documentation, tutorials, and examples for HTML, CSS, and JavaScript.
- W3Schools CSS Tutorial: A beginner-friendly guide to learning CSS, with interactive examples and exercises.
- CSS-Tricks: A popular blog and community for web designers and developers, featuring articles, tutorials, and tips on CSS and web design.