Search within TutorialsPark

CSS3 column-rule Property


Shorthand to define the rule between column in a multicolumn layout


Definition and Notes.

1. The CSS column-rule property is a shorthand to set the width, style and color of the rule("vertical-line") drawn in between the columns in an element laid out with multiple columns

2. If any of the values are ommited it is set to its default value.

Syntax:

CSS column-rule property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- If column-rule-style is not defined, it will be set to its default value i.e none. Hence, no column rule will be displayed.

Property Values

Value Description
column-rule-width To specify the width of the rule in between the columns.
column-rule-style To specify the style of the rule in between columns.
column-rule-color To specify the color of the rule in between the columns.

Specifications

Specs Value
Name column-rule
Value <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
Initial Value See Individual Properties
Applies to Element laid out using multiple Columns
Javascript syntax object.style.columnRule="10px solid #fa4b2a"
Inherited No
Computed Value Same as declared value.
Browser Support internetexplorer safari firefox opera chrome

Related Examples.