CSS column-rule-style property

Definition and usage

The column-rule-style property specifies the style rule between columns.

See also:

CSS3 Tutorial:CSS3 Multi-column

HTML DOM Reference Manual:columnRuleStyle property

Example

Set the color rule between columns:

div {
  column-rule-style: dotted;
}

Try it yourself

More examples at the bottom of the page.

CSS syntax

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

Property value

Value Description Test
none Define no rules. Test
hidden Define hidden rules. Test
dotted Define dotted-line rules. Test
dashed Define dashed-line rules. Test
solid Define solid-line rules. Test
double Define double-line rules. Test
groove Define 3D grooved rules. The effect depends on the width and color values. Test
ridge Define 3D ridged rules. The effect depends on the width and color values. Test
inset Define 3D inset rules. The effect depends on the width and color values. Test
outset Define 3D outset rules. The effect depends on the width and color values. Test

Technical details

Default value: none
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.columnRuleStyle="dotted"

More examples

Column-count
Divides the text inside the div element into three columns.
Column-gap
Divides the text inside the div element into three columns, with a 30-pixel gap between them.
Column-rule
Specifies the width, style, and color between columns.

Browser support

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

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
50.0
4.0 -webkit-		 10.0 52.0
2.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1