border-left-style

Summary

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

Syntax

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;

border-left-style: inherit;

Values

<br-style>

Is a keyword describing the style of the left border. It can have the following values:

none	fake	Like for the hidden keyword, displays no border. In that case, except if a background image is set, the calculated values of border-left-width will be 0, even if specified otherwise through the property. In case of table cell and border collapsing, the none value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.
hidden	fake	Like for the none keyword, displays no border. In that case, except if a background image is set, the calculated values of border-left-width will be 0, even if specified otherwise through the property. In case of table cell and border collapsing, the hidden value has the highest priority: it means that if any other conflicting border is set, it won't be displayed.
dotted	fake	Displays a series of rounded dots. The spacing of the dots are not defined by the specification and are implementation-specific. The radius of the dots is half the calculated border-left-width.
dashed	fake	Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid	fake	Displays a single, straight, solid line.
double	fake	Displays two straight lines that add up to the pixel amount defined as border-width or border-left-width.
groove	fake	Displays a border leading to a carved effect. It is the opposite of ridge.
ridge	fake	Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of groove.
inset	fake	Displays a border that makes the box appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
outset	fake	Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

inherit

Represents the border style used by the parent of the current element.

Formal syntax

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

Examples

HTML Content

<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 Content

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

/* 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;}

Output

Specifications

Browser compatibility

[1] Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-left-style was solid. This has been fixed in Firefox 50.  

See also

• The other style-related border properties: border-bottom-style, border-right-style, border-top-style, and border-style.
• The other left-border-related properties: border-left, border-left-color, and border-left-width.