YouTip

Prop Style Columnrulestyle

📅 2026-06-18 | 📂 JavaScript

HTML DOM Style columnRuleStyle Property

HTML DOM Style columnRuleStyle Property

-- Learning is not just about technology, but also about dreams!

JavaScript Reference Manual

JavaScript Objects

JavaScript Array Object JavaScript Boolean Object JavaScript Date Object JavaScript Math Object JavaScript Number Object JavaScript String Object JavaScript RegExp Object JavaScript Global Properties/Functions JavaScript Operators JavaScript Error

Browser Objects

Window Object Navigator Object Screen Object History Object Location Object Storage Object

DOM Objects

HTML DOM Document Object HTML DOM Element Object HTML DOM Attribute Object HTML DOM Event Object HTML DOM Console Object CSSStyleDeclaration Object DOM HTMLCollection

HTML Objects

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

HTML DOM Table Object

Style columnRuleStyle Property

Style Object Reference Manual Style Object

Example

Change the style rule between columns:

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

Try it Yourself »

Definition and Usage

The columnRuleStyle property specifies the style rule between columns.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 10 and Opera support the columnRuleStyle property.

Firefox supports an alternative property for this, the MozColumnRuleStyle property.

Safari and Chrome support an alternative property for this, 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. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

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

Related Articles

CSS3 Tutorial: CSS3 Multiple Columns

CSS Reference Manual: column-rule-style Property

Style Object Reference Manual Style Object