Style columnRuleStyle property

Definition and Usage

columnRuleStyle This property specifies the style of the rules between columns.

See also:

CSS3 Tutorial:Multi-colonna CSS

CSS Reference Manual:column-rule-style attribute

Example

Change the style of the rules between columns:

document.getElementById("myDIV").style.columnRuleStyle = "dotted";

Try it yourself

Syntax

Return the columnRuleStyle property:

object.style.columnRuleStyle

Set the columnRuleStyle property:

object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit"
Value Description
none Defines a border without any style. Default.
hidden Same as "none", except when resolving border conflicts in table elements.
dotted Defines a dotted border.
dashed Defines a dashed border.
solid Defines a solid border.
double Defines two borders. The width of both borders is the same as the border-width value.
groove Defines a 3D grooved border. The effect depends on border-color values.
ridge Defines a 3D ridged border. The effect depends on border-color values.
inset Defines a 3D inset border. The effect depends on border-color values.
outset Defines a 3D outset border. The effect depends on border-color values.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: None
Return value: A string that represents the column-rule-style attribute.
CSS version: CSS3

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
50.0 10.0 52.0 10.0 37.0