HTML - DOM Style Object columnRule Property

Quiz

HTML DOM Style Object columnRule property sets or returns column rule properties. It is a shorthand notation for width, style and color of the rule between columns.

Syntax

Set the columnRule property:

object.style.columnRule= "column-rule-width | column-rule-style | column-rule-color | initial | inherit";

Get the columnRule property:

object.style.columnRule;

Property Values

Value	Description
columnRuleWidth	It sets the rule width between columns. It's default value is medium.
columnRuleStyle	It sets the rule style between columns. It's default value is none.
columnRuleColor	It sets the rule color between columns. It's default value is element's color.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents column rule property of an element.

Example of HTML DOM Style Object 'columnRule' Property

The following example illustrates columnRule property which adds a green dotted rule betweeen columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRule Property
    </title>
    <style>
        #rule {
            column-count: 3;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Change</button>
    <p id="rule">
        CSS is the acronym for "Cascading Style Sheet".
        It's a style sheet language used for describing
        the presentation of a document written in a markup
        language like HTML. CSS helps the web developers to
        control the layout and other visual aspects of the
        web pages. CSS plays a crucial role in modern web
        development by providing the tools necessary to create
        visually appealing, accessible, and responsive websites.
    </p>
    <script>
        function fun() {
            document.getElementById("rule")
                .style.columnRule = "5px dotted #04af2f";
        }
    </script>
</body>
</html>

Supported Browsers

Property
columnRule	Yes 50	Yes 12	Yes 52	Yes 9	Yes 11.1

html_dom.htm

Print Page