CSS column-rule-style property

Description

CSS column-rule-style property defines the style of column ruler. This style is the same as of border-style.

Syntax

column-rule-style : none | hidden | dashed | solid | dotted | double | ridge | groove

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;

Applicable to

It applies to multi-column container.

#CSS digger
Was this article helpful?

 
CSS column-rule-style property defines the style of column ruler. This style is the same as of border-style.
×

Ctrl+D