CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS3 column-rule-color Property

Topic: CSS3 Properties ReferencePrev|Next

Description

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

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

Default value: The current color of the element
Applies to: Multi-column elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

column-rule-color:
 
color | initial | inherit

The example below shows the column-rule-color 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
color Specifies the color of the column rules. Takes any valid CSS Color Values.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element column-rule-color property.

Browser Compatibility

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

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