Latest web development tutorials
 

Style columnRuleStyle Property

< Style Object

Example

Change the style of the rule between columns:

document.getElementById("myDIV").style.columnRuleStyle = "dotted";
Try it Yourself »

Definition and Usage

The columnRuleStyle property specifies the style of the rule between columns.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The columnRuleStyle property is supported in Internet Explorer 10 and Opera.

Firefox supports an alternative, the MozColumnRuleStyle property.

Safari and Chrome support an alternative, the WebkitColumnRuleStyle property.


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"

Property Values

Value Description
none Default value. Defines no rule
hidden Defines a hidden rule
dotted Defines a dotted rule
dashed Defines a dashed rule
solid Defines a solid rule
double Defines a double rule
groove Specifies a 3D grooved rule. The effect depends on the width and color values
ridge Specifies a 3D ridged rule. The effect depends on the width and color values
inset Specifies a 3D inset rule. The effect depends on the width and color values
outset Specifies a 3D outset rule. The effect depends on the width and color values
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: none
Return Value: A String, representing the column-rule-style property of an element
CSS Version CSS3

Related Pages

CSS3 tutorial: CSS3 Multiple Columns

CSS reference: column-rule-style property


< Style Object