CSS Reference Property

column-rule 5f301z

The column-rule property is used to draw a rule, kind of like a border, between adjacent columns in a multi-column layout. 6p25l

It is a shorthand property used to set the longhand column rule properties.

A column rule can be styled, colored, and have a specified width. This can be done using the longhand properties: column-rule-color.

A column rule is drawn only between adjacent columns; that is, it is not drawn before the first column, nor is it drawn after the last column.

A column rule does not take up any space. This means that adding a column rule will not increase the amount of space, or the column-gap), between the columns.

Official Syntax 2f2j3w

  • Syntax:

    column-rule: <"column-rule-width"> || <"column-rule-style"> || <"column-rule-color">
  • Initial: 0 solid currentColor; which is the concatenation of the initial values of each of the longhand properties
  • Applies To: multi-column elements
  • Animatable: the column-rule-color property is animatable as a color

Values 445h6m

<‘column-rule-width’> || <‘column-rule-style’> || <‘column-rule-color’>
See the column-rule-color entries for more information on possible values for each property.

Notes 6p2z1x

Omitted values are set to their initial values. That is, if you only specify values for one or two properties in the shorthand column-rule property, the property or properties whose values are not specified are set to their initial values.

Examples 5w70f

The following rule:

column-rule: 1em dotted #ddd;
                

is equivalent to:

column-rule-width: 1em;
column-rule-style: dotted;
column-rule-color: #ddd;
                

The following draws a green dashed rule between adjacent columns in a multi-column element:

.el {
    columns: 12em 3;
    column-rule: 2px dashed #009966;
}
                

The following example applies a column rule which spans across and fills the entire space between adjacent columns, because the width of the rule is equal to the width of the column-gap:

.mag {
    column-width: 25%;
    column-rule: 20px solid gray;
    column-gap: 20px;
}
                

Live Demo 603y6q

Play with the values of the column-rule property and the column-gap properties to see how the rules between the columns are drawn.

View this demo on the Codrops Playground

Browser 51c73

CSS3 Multiple column layout 3b593z

Method of flowing information in multiple columns

W3C Candidate Recommendation

ed from the following versions:

Desktop 1qa5q

  • 50
  • 52
  • 10
  • 11
  • 10

Mobile / Tablet 6x6t5m

  • 10
  • 66
  • all
  • 66
  • 60

* denotes prefix required.

  • ed:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading 375l1b

Written by

Last updated June 11, 2020 at 10:24 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.