Style columnRuleStyle Property
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
| Property | |||||
|---|---|---|---|---|---|
| columnRuleStyle | 50.0 | 10.0 | 52.0 | 10.0 | 37.0 |
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
