/* <'border-style'> values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset;  /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: revert; column-rule-style: unset; 

column-rule-style

The column-rule-style CSS property sets the style of the line drawn between columns in a multi-column layout.

Syntax

/* <'border-style'> values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset;  /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: revert; column-rule-style: unset; 

The column-rule-style property is specified as a single <'border-style'> value.

Values

Is a keyword defined by border-style describing the style of the rule. The styling must be interpreted as in the collapsing border model.

Formal definition

Formal syntax

<'border-style'>

Examples

Setting a dashed column rule

<p>This is a bunch of text split into three columns.    The `column-rule-style` property is used to change    the style of the line that is drawn between columns.    Don't you think that's wonderful?</p> 

p {   column-count: 3;   column-rule-style: dashed; } 

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors