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
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