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>

Creating a Styled Sidebar

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.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-background-repeat.png

CSS Background-Repeat A Comprehensive Guide Discover how to use CSS background-repeat for web design. Control image repetition with options like repeat, no-repeat, space, and round.

css_property_cover/css-property-border-color.png

CSS Border-Color Enhance Border Appeal Learn how to use CSS border-color to enhance the visual appeal of your web designs. Explore available options like hex codes, RGB, RGBA, HSL, and HSLA.

css_property_cover/css-property-border-image-repeat.png

CSS Border-Image-Repeat Customizing Border Images CSS border-image-repeat allows customization of border images. Use options like stretch, repeat, round, and space to create unique designs. Enhance visuals with ease.

css_property_cover/css-property-border-left-color.png

CSS Border-Left-Color Customize Left Border Learn how to use the CSS border-left-color property to customize the color of an element's left border. Explore available options including named colors, hex values, and global values.

css_property_cover/css-property-border-left-width.png

CSS Border-Left-Width Mastering Web Design Learn how to use the CSS border-left-width property to control the width of an element's left border. Explore available options such as pixels, ems, vmax, and keywords like thin, medium, and thick.

css_property_cover/css-property-border-style.png

CSS Border-Style Enhance Your Web Design Discover the css border-style property to enhance your web design. Explore available options like solid, dotted, dashed, and more to create visually appealing borders.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS border-left-style Customize Left Border Styles

Introduction

Specification

Syntax

Keyword Values Explained

Global Values Explained

Usage

Formal Definition

Initial Value

Applies To

Inherited

Computed Value

Animation Type

Formal Syntax

Examples

Setting Various Border Styles

HTML

CSS

Applying Border Styles to Headings

HTML

Creating a Styled Sidebar

HTML

Browser Compatibility

Compatibility Table

Cross-Browser Testing for border-left-style

HTML

Testing Procedure

Conclusion

See Also

Talk with CEO