CSS column-rule-style property

Property values

noneDefault

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

ruler-inline-end-style: none;

hidden

It is same as 'none'.

column-rule-style: hidden;

dashed

The ruler consists of a series of square shaped dashes.

column-rule-style: dashed;

dotted

The ruler consists of a series of round dots.

column-rule-style: dotted;

solid

The ruler consists of a solid line.

column-rule-style: solid;

double

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

column-rule-style: double;

ridge

The content seems to be coming out of the canvas. The half outer side of ruler is darker than inner half size.

column-rule-style: ridge;

groove

The content seems to be going into the canvas. The half inner side of ruler is darker than half outer side.

column-rule-style: groove;