Expand All | Collapse All

CSS3 column-rule-style Property

Topic: CSS3 Properties ReferencePrev|Next


The column-rule-style CSS property sets the style of the rule drawn between the columns in a multi-column layout.

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

Default value: none
Applies to: Multi-column elements
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3


The syntax of the property is given with:

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

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

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

Property Values

The following table describes the values of this property.

Value Description
none No rule will be displayed.
hidden Displays no rule. Same as none.
dotted Displays the rule as a series of dots.
dashed Displays the rule as a series of short line segments i.e. dashes.
solid Displays the rule as a single solid line.
double Displays the rule as a two parallel solid lines with some space between them. The sum of the two lines and the space between them equals the value of column-rule-width property.
groove Displays the rule as it were carved into the page. It gives the impression of 3D that is typically achieved by creating a shadow from two colors that are slightly lighter and darker than the column-rule-color.
ridge Displays the rule that has the opposite effect of groove. It also gives the impression of 3D, the rule looks as though it were coming out of the page.
inset Displays the rule same as ridge.
outset Displays the rule same as groove.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element column-rule-style property.

Note: The column-rule-style property basically takes the values defined for the border-style, but the values are interpreted as in the collapsing border model.

Browser Compatibility

The column-rule-style 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, column-rule-width, column-rule-color, column-span, column-count, columns.

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