English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Reference Manual

CSS @rules (RULES)

Complete CSS Properties List

CSS3 column-rule-size attribute

column-rule-Usage and examples of the color attribute

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

The table below provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.Default value:colorCurrent
Element valueApplies to:
Multi-column elementsInheritance:
NoAnimatable:is. Please refer to.
Animation properties CSS3Version:
New feature ofobject.style.columnRuleColor="#ff00ff"

Syntax for using column rule color

The syntax of this attribute is as follows:

column-rule-color: color | initial | inherit

The following examples demonstrate how to use column-rule-color attribute.

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;
    
    column-count: 3;
    column-gap: 100px;
    column-rule-color: red;
    column-rule-width: 2px;
    column-rule-style: solid;
}
Test and see‹/›

Attribute value

The table below describes the value of this attribute.

ValueDescription
colorSpecify the color of the column rule. Accepts any validCSS color value.
initialSet this property to its default value.
inheritIf specified, the associated element adopts its parent element's column-rule-The value of the color attribute.

Browser compatibility

column-rule-The compatibility of the color attribute across browsers, the numbers in the table below represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

  • Firefox 2+ -moz-

  • Google Chrome 4+ -webkit-

  • Internet Explorer 10+

  • Apple Safari 3.1+ -webkit-

  • Opera 11.1+ -o-,15+ -webkit-

Further reading

Please refer to the following tutorials:CSS3Multi-column layout.

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