The column-rule-style property sets the style of the rule between columns. This property behaves like borders.

Syntax:

selector { 

         column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | lenght | initial | inherit;

}

Values:

Possible values for column-rule-style property are:

  • none; The default value. No rule between.
  • hidden; A rule exists but is hidden.
  • dotted; A dotted rule.
  • dashed; A dashed rule.
  • solid; A solid rule.
  • double; A double rule.
  • groove; A 3D grooved rule.
  • ridge; A 3D ridged rule.
  • inset; A 3D inset rule.
  • outset; A 3D outset rule.
  • length; A number (px, em, %…) specifying the width of a rule.
  • initial, inherit

Once again, as we can see, the column-rule-style property is similar to the border-style property.

Example

The column-rule-style property applied on paragraphs example:

 

›› go to examples ››