CSS column-rule attribute

Definition and Usage

The column-rule attribute is a shorthand attribute used to set all column-rule-* attributes.

The column-rule attribute sets the width, style, and color rules between columns.

See also:

CSS3 Tutorial:CSS3 Multi-column

HTML DOM Reference Manual:columnRule Attribute

Example

Specify the width, style, and color rules between columns:

div
{
column-rule:3px outset #ff00ff;
}

Try it yourself

More examples are at the bottom of the page.

CSS Syntax

column-rule: column-rule-width column-rule-style column-rule-color;

Attribute Value

Value Description
column-rule-width Set the width rule between columns.
column-rule-style Set the style rule between columns.
column-rule-color Set the color rule between columns.

Technical Details

Default Value: medium none black
Inheritance: no
Version: CSS3
JavaScript Syntax: object.columnRule="3px outset #ff00ff"

More examples

Column-count
Divide the text within the div element into three columns.
Column-gap
Divide the text within the div element into three columns, with a 30-pixel gap between them.

Browser Support

Numbers in the table indicate the first browser version that fully supports the 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