Expand All | Collapse All

CSS3 column-rule Property

Topic: CSS3 Properties ReferencePrev|Next


The column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a shorthand property for setting the individual properties i.e. column-rule-width, column-rule-style and column-rule-color at once.

The following table summarizes the usages context and the version history of this property.

Default value: See individual properties
Applies to: Multi-column elements
Inherited: No
Animatable: Yes, as some of the properties of the shorthand are animatable. See animatable properties.
Version: New in CSS3


The syntax of the property is given with:

[ column-rule-width column-rule-style column-rule-color ] | initial | inherit

The example below shows the column-rule property in action.

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;

Property Values

The following table describes the values of this property.

Value Description
column-rule-width Sets the width of the rule between columns. Default value is medium. Negative values are not allowed.
column-rule-style Sets the style of the rule between columns. Default value is none
column-rule-color Sets the color of the rule between columns. Default value is the color of the element.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element column-rule property.

Browser Compatibility

The column-rule property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 2+ -moz-
  • Google Chrome 4+ -webkit-
  • Internet Explorer 10+
  • Apple Safari 3.1+ -webkit-
  • Opera 11.1+ -o-, 15+ -webkit-

Further Reading

See tutorial on: CSS3 Multi-column Layouts.

Related properties: column-width, column-fill, column-gap, column-rule-width, column-rule-style, column-rule-color, column-span, column-count, columns.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties