CSS outline-style property

Description

CSS outline-style defines style for the outline of a box.

Syntax

outline-style : none | hidden | dashed | solid | dotted | double | ridge | groove | inset | outset

Property values

noneDefault

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

outline-style: none;

dashed

The outline consists of a series of square shaped dashes.

outline-style: dashed;

dotted

The outline consists of a series of round dots.

outline-style: dotted;

solid

The outline consists of a solid line.

outline-style: solid;

double

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

outline-style: double;

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 outline-color.

The outer side of the outline is darker than the inner side of the outline.

outline-style: ridge;

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 outline-color.

The inner side of the outline is darker than the outer side of the outline.

outline-style: groove;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
×

Ctrl+D