totn CSS

CSS: border-left-style property

This CSS tutorial explains how to use the CSS property called border-left-style with syntax and examples.

Description

The CSS border-left-style property defines the line style of the left border of a box.

Syntax

The syntax for the border-left-style CSS property is:

border-left-style: value;

Parameters or Arguments

value

The line style to use for the left border. It can be one of the following:

Value Description
none No border (This is the default)
div { border-left-style: none; }
solid Single, straight, solid line
div { border-left-style: solid; }
dotted Series of dots
div { border-left-style: dotted; }
dashed Series of short dashes
div { border-left-style: dashed; }
double Two straight lines that total the pixel amount defined by border-left-width
div { border-left-style: double; }
groove Carved effect
div { border-left-style: groove; }
ridge 3D appearance where border looks like it is "coming out" (opposite of groove)
div { border-left-style: ridge; }
inset Embedded appearance
div { border-left-style: inset; }
outset Embossed appearance (opposite of inset)
div { border-left-style: outset; }
hidden Border is hidden
div { border-left-style: hidden; }
inherit Element will inherit the border-left-style from its parent element
div { border-left-style: inherit; }

Note

Browser Compatibility

The CSS border-left-style property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border-left-style property below, exploring examples of how to use this property in CSS.

Let's look at an example where we set a dashed left border.

div { border-left-style: dashed; }

In this CSS border-left-style example, we have set the style of the left border to dashed.

Next, let's set our left and top border styles.

div { border-left-style: solid; border-top-style: double; }

In this border-left-style example, we have set the left border style to a solid line and the top border style to a double line. As you can see, the sides of the border can be completely different which can add a unique visual effect to your web page.

Share on: