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

/* <'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

<'border-style'>

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

Initial value	none
Applies to	multicol elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

<'border-style'>

Examples

Setting a dashed column rule

HTML

<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> 

CSS

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

Result

Specifications

Specification
CSS Multi-column Layout Module Level 2 # crs

See also

Multiple-column Layout column-rule column-rule-width column-rule-color

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語Русский中文 (简体) Change language