The column-rule property is a shorthand property for setting all column rules there are. The property itself sets the width, style and color of the rule between columns.

Syntax:

selector { 

         column-rule: column-rule-width column-rule-style column-rule- color | initial | inherit;

}

Values:

The values that may be set for column-rule property are:

  • column-rule-width; Sets the width between columns. The default value is medium.
  • column-rule style; Sets the style of the rule between columns. The default value is none.
  • column-rule-color; Sets the color of the rule between columns. The default value is the basic color of the element itself.
  • initialinherit

Example

The column-rule property applied to paragraphs:

 

›› go to examples ››