CSS column-rule Property

❮ Previous Reference Next ❯


.example {
  column-count: 3;
  column-rule: 5px dashed red;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.


The column-rule shorthand property defines the style, width, and color of the rule divider between columns in a multicolumn text flow.

Note: Note: As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value.

Default value:medium none color
JavaScript syntax:
object.style.columnRule="column-rule-width column-rule-style column-rule-color|initial|inherit|revert|revert-layer|unset";

Standard Syntax

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
column-rule-width Default value is medium. Specifies the width of the rule between columns. Negative values are not allowed.
column-rule-style Default value is none. Sets the style of the rule between columns.
column-rule-color Default value is the color of the element. Sets the color of the rule between columns.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  column-rule: medium none color;
❮ Previous Reference Next ❯