column-rule-style

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

Try it

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: revert-layer;
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

column-rule-style = 
  <line-style>  

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

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
column-rule-style
50
1
12
12
52
3.5-74
10
15
11.1
9
3
50
≤37
50
18
52
4
14
11.1
9
1
5.0
1.0

See also

https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style