CSS column-rule-width Property

column rule width : Specify the width of the rule between columns:

div {
-webkit-column-rule-width: 10px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 10px; /* Firefox */
column-rule-width: 10px;
}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The column-rule-width property specifies the width of the rule between columns.

Default value: medium
Inherited: no
Animatable: yes. Read about animatable – Try it
Version: CSS3
JavaScript syntax: object.style.columnRuleWidth=”10px” Try it
CSS Syntax
column-rule-width: medium|thin|thick|length|initial|inherit;
Property Values
Value Description
medium Default value. Defines a medium rule
thin Defines a thin rule
thick Defines a thick rule
length Specifies the width of the rule
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

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

div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

Try it Yourself »

Specify a 40 pixels gap between the columns:

div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}

Try it Yourself »