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.

初始值as each of the properties of the shorthand:
适用元素multicol elements
计算值as each of the properties of the shorthand:
是否适用于 CSS 动画as each of the properties of the shorthand:
正规顺序order of appearance in the formal grammar of the values


Formal syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;


Accepts one, two or three values in any order: 

Is a <length> 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.

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

Live Example

padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;


Specification Status Comment
CSS Multi-column Layout Module
Candidate Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 3.5 (1.9.1)-moz 10 11.1 3.0 (522)-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ?


 此页面的贡献者: Sebastianz, fscholz, FredWe
 最后编辑者: Sebastianz,