The column-rule CSS property sets the width, style, and color of the rule (line) drawn between columns in a multi-column layout.

It is a shorthand property that sets the individual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-color.

Note: As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties).

Syntax

column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

/* Global values */
column-rule: inherit;
column-rule: initial;
column-rule: unset;

The column-rule property is specified as 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

<p class="content-box">
  This is a bunch of text split into three columns.
  Take note of how the `column-rule` property is used
  to adjust the style, width, and color of the rule
  that appears between the columns.
</p>

CSS

.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}

Result

Specifications

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

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 50
Full support 50
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 52
Full support 52
Full support 3.5
Prefixed Notes
Prefixed Requires the vendor prefix: -moz-
Notes Before Firefox 3, the default value for the normal keyword was 0 and not 1em.
IE Full support 10Opera Full support 11.1
Full support 11.1
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support YesChrome Android Full support 50
Full support 50
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile ? Firefox Android Full support 52
Full support 52
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
Full support 5.0
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.