CSS border-left-style property

Property values

noneDefault

There is no style. In this case, the color and width of left border are also ignored i.e. 0px border.

border-left-style: none;

Try it { }

hidden

It is same as 'none' but resolve to different results for the border-collapse property in tables.

border-left-style: hidden;

Try it { }

dashed

The left border consists of a series of square shaped dashes.

border-left-style: dashed;

Try it { }

dotted

The left border consists of a series of round dots.

border-left-style: dotted;

Try it { }

solid

The left border consists of a solid line.

border-left-style: solid;

Try it { }

double

The left border consists of two lines. The total border-width equals to the two lines and space between them.

border-left-style: double;

Try it { }

ridge

The content seems to be coming out of the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The outer side of the left border is darker than the inner side of the left border.

border-left-style: ridge;

Try it { }

groove

The content seems to be going into the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The inner side of the left border is darker than the outer side of the left border.

border-left-style: groove;

Try it { }

inset

The color of top, left borders is darker than border-color but the color of right, bottom borders is the same as border-color.

The effect of inset value can be observed in border.

border-left-style: inset;

Try it { }

outset

The color of top, left sides is the same as border-left but the color of right, bottom sides is darker than border-color.

The effect of outset value can be observed in border.

border-left-style: outset;

Try it { }