There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

This article needs a technical review. How you can help.


In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. 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
Computed valueas each of the properties of the shorthand:
Animatableas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values


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;


Accepts one, two or three values in any order:

Is a {{ cssxref }} or one of the three keywords, thin, medium, or thick. See border-width for details.
See border-style for possible values and details.
Is a <color> value.

Formal syntax

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


/* same as "medium dotted currentColor" */ { column-rule: dotted; }

/* same as "medium solid blue" */ { column-rule: solid blue; }

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

Example 1

HTML Content

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

CSS Content

padding: 0.3em;
background: gold; 
border: groove 2px gold; 
-moz-column-rule: inset 2px gold;
-moz-column-count: 3;



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

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 3.5 (1.9.1)-moz 10 11.10 3.0 (522)-webkit
Unprefixed 50.0        
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? ? (Yes) ? ? ? ?
Unprefixed No support 50.0         50.0

Document Tags and Contributors

 Last updated by: jpmedley,