column-rule

In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column.

column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;
/* Global values */
column-rule: inherit;
column-rule: initial;
column-rule: unset;

It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately: column-rule-width, column-rule-style and column-rule-color.

Initial valueas each of the properties of the shorthand:
Applies tomulticol elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Syntax

One, two, or three of the values listed below, in any order:

Values

<'column-rule-width'>
Is a <length> or one of the three keywords, thin, medium, or thick. See border-width for details.
<'column-rule-style'>
See border-style for possible values and details.
<'column-rule-color'>
Is a <color> value.

Formal syntax

<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Examples

Example 1

/* same as "medium dotted currentColor" */
p.foo { column-rule: dotted; }
/* same as "medium solid blue" */
p.bar { column-rule: solid blue; }
/* same as "8px solid currentColor" */
p.baz { column-rule: solid 8px; }
p.abc { column-rule: thick inset blue; }

Example 2

HTML content

<div id="col_rul"> 
  <p> column one </p>
  <p> column two </p>
  <p> column three </p>
</div>

CSS content

#col_rul { 
  padding: 0.3em;
  background: gold; 
  border: groove 2px gold;
  column-rule: inset 2px gold;
  column-count: 3;
}

Result

Specifications

Specification Status Comment
CSS Multi-column Layout Module
The definition of 'column-rule' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit
50.0[1]
(Yes)-webkit 3.5 (1.9.1)-moz
52.0 (52.0)[2]
10 11.10 3.0 (522)-webkit
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? ?
50.0[1]
(Yes)-webkit (Yes)
52.0 (52.0)[2]
? ? ? ?
50.0[1]

[1]  Unprefixed as of Chrome 50.

[2] Unprefixed as of Gecko 52, with prefixed aliases still available.