column-rule-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2017⁩.

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

Try it

Syntax

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

column-rule-style = 
  <line-style-list>       |
  <auto-line-style-list>  

<line-style-list> = 
  [ <line-style-or-repeat> ]+  

<auto-line-style-list> = 
  [ <line-style-or-repeat> ]* <auto-repeat-line-style> [ <line-style-or-repeat> ]*  

<line-style-or-repeat> = 
  <line-style>         |
  <repeat-line-style>  

<auto-repeat-line-style> = 
  repeat( auto , [ <line-style> ]+ )  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

<repeat-line-style> = 
  repeat( [ <integer [1,∞]> ] , [ <line-style> ]+ )