CSS column-rule Property

Example

Specify the width, style, and color of the rule between columns:

div {
  column-rule: 4px double #ff00ff;
}

Definition and Usage

The column-rule property sets the width, style, and color of the rule between columns.

This property is a shorthand property for:

• column-rule-width
• column-rule-style (required)
• column-rule-color

If column-rule-color is omitted, the color applied will be the color of the text.

Default value:	medium none color
Inherited:	no
Animatable:	yes, see individual properties.
Version:	CSS3
JavaScript syntax:	object.style.columnRule="3px outset blue"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which column-rule is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

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

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-rule	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

CSS Syntax

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

Property Values

Value	Description	Demo
column-rule-width	Sets the width of the rule between columns. Default value is medium
column-rule-style	Sets the style of the rule between columns. Default value is none
column-rule-color	Sets the color of the rule between columns. Default value is the color of the element
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Divide the text in a <div> element into three columns:

div {
  column-count: 3;
}

Example

Specify a 40 pixels gap between the columns:

div {
  column-gap: 40px;
}