HTML - DOM Style Object columnRuleStyle Property

Quiz

HTML DOM Style Object columnRuleStyle property is used to set or get the rule style between the columns.

Syntax

Set the columnRuleStyle property:

object.style.columnRuleStyle= "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit";

Get the columnRuleStyle property:

object.style.columnRuleStyle;

Property Values

Value	Description
none	It is default value which specifies no border.
hidden	It is same as 'none' but it creates a border which is transparent or not visible and takes the space as specified by border width. It is helpful in border conflict resolution in table elements.
dotted	It specifies a dotted border.
dashed	It specifies a dashed border.
solid	It specifies a solid border.
double	It defines a double border in which two lines are used as border and it's width is same as specified by borderWidth.
groove	It specifies a 3D grooved border whose effect depends on the border-color value.
ridge	It specifies a 3D grooved border whose effect depends on the border-color value.
inset	It specifies a 3D inset border whose effect depends on the border-color value.
outset	It specifies a 3D outset border whose effect depends on the border-color value.
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 style property of an element.

Examples of HTML DOM Style Object 'columnRuleStyle' Property

The following examples illustrates various column rule style property values.

Add Column Rule Style

In the following example we have added a solid rule and changed the column rule style from solid to double and dashed.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleStyle Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px solid;
        }
    </style>
</head>
<body>
    <p>Click to change the rule style.</p>
    <button onclick="fun()">Double</button>
    <button onclick="funtwo()">Dashed</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.columnRuleStyle = "double";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleStyle = "dashed";
        }
    </script>
</body>
</html>

Set Column Rule Style to 'dotted' and 'hidden'

The following example sets the column rule style to dotted and hidden.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleStyle Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px solid;
        }
    </style>
</head>
<body>
    <p>Click to change the rule style.</p>
    <button onclick="fun()">Dotted</button>
    <button onclick="funtwo()">Hidden</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.columnRuleStyle = "dotted";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleStyle = "hidden";
        }
    </script>
</body>
</html>

Set Column Rule Style to 'groove' and 'ridge'

The following example sets the column rule style to groove and ridge.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleStyle Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px none;
        }
    </style>
</head>
<body>
    <p>Click to change the rule style.</p>
    <button onclick="fun()">Groove</button>
    <button onclick="funtwo()">Ridge</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.columnRuleStyle = "groove";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleStyle = "ridge";
        }
                
    </script>
</body>
</html>

Set Column Rule Style to 'inset' and 'outset'

The following example sets the column rule style to inset and outset.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleStyle Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px none;
        }
    </style>
</head>
<body>
    <p>Click to change the rule style.</p>
    <button onclick="fun()">Inset</button>
    <button onclick="funtwo()">Outset</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.columnRuleStyle = "inset";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleStyle = "outset";
        }
                
    </script>
</body>
</html>

Supported Browsers

Property
columnRuleStyle	Yes 50	Yes 12	Yes 52	Yes 9	Yes 11.1

html_dom.htm

Print Page