HTML | DOM Style columnRule Property

The DOM Style columnRule property sets the width, style, and color of the rule between columns.

To get the columnRule Property

object.style.columnRule = value

TO set the columnRule property

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

columnRuleWidth: Default value is medium. Sets the width between columns.
columnRuleStyle: Sets the style of the rule. “none” is default value.
columnRuleColor: Sets the color of the rule. Element color is default value.
initial: Sets the default value.
inherit: Inherit property from parent element.

Return Value : This will return a String representing the column-rule property of a selected element.

Example-1: columnRuleWidth, columnRuleStyle and columnRuleColor.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style columnRule Property
    </title>
    <style>
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
        }
    </style>
</head>
 
<body>
 
    <div id="mainDIV">
        <p id="p1"><u style="color: green ;font-size: 20px;">
         Welcome to GeeksforGeeks.!
         </u>
            <br>
        </p>
         An operating system acts as an intermediary
         between the user of a computer and computer
         hardware. The purpose of an operating system
         is to provide an environment in which a user
         can execute programs in a convenient and
         efficient manner.
 
           An operating system is a software that manages
           the computer hardware. The hardware must
           provide appropriate mechanisms to ensure
           the correct operation of the computer system
           and to prevent user programs from interfering
           with the proper operation of the system.
        
    </div>
    <br>
    <input type="button" onclick="mainFunction()"
                                      value="Submit" />
 
    <script>
        function mainFunction() {
            document.getElementById(
            "mainDIV").style.columnRuleWidth = "3px";
            document.getElementById(
            "mainDIV").style.columnRuleStyle = "solid";
            document.getElementById(
            "mainDIV").style.columnRuleColor = "red";
        }
    </script>
 
</body>
 
</html>

Output:

Before Click:

After Click:

Example-2: This sets the property value to its default value of the property. For the initial value rule-style and rule-color will be none and default color.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style columnRule Property
    </title>
    <style>
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 3px;
            column-rule-color: red;
        }
    </style>
</head>
 
<body>
 
    <div id="mainDIV">
        <p id="p1"><u style="color: green ;font-size: 20px;">
        Welcome to GeeksforGeeks.!
        </u>
            <br>
        </p>
         An operating system acts as an intermediary
         between the user of a computer and computer
         hardware. The purpose of an operating system
         is to provide an environment in which a user
         can execute programs in a convenient and
         efficient manner.
 
           An operating system is a software that manages
           the computer hardware. The hardware must
           provide appropriate mechanisms to ensure
           the correct operation of the computer system
           and to prevent user programs from interfering
           with the proper operation of the system.
        
    </div>
    <br>
    <input type="button" onclick="mainFunction()"
                                      value="Submit" />
 
    <script>
        function mainFunction() {
            document.getElementById(
            "mainDIV").style.columnRule = "initial";
        }
    </script>
 
</body>
 
</html>

Output:

Before Click:

After Click:

Example-3: Inherits the property from its parent element. Here, by using inherit we can set the different rule-style and rule-color different that it was set.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style columnRule Property
    </title>
    <style>
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 3px;
            column-rule-color: red;
        }
    </style>
</head>
 
<body>
 
    <div id="mainDIV">
        <p id="p1"><u style="color: green ;font-size: 20px;">
        Welcome to GeeksforGeeks.!
        </u>
            <br>
        </p>
         An operating system acts as an intermediary
         between the user of a computer and computer
         hardware. The purpose of an operating system
         is to provide an environment in which a user
         can execute programs in a convenient and
         efficient manner.
 
           An operating system is software that manages
           the computer hardware. The hardware must
           provide appropriate mechanisms to ensure
           the correct operation of the computer system
           and to prevent user programs from interfering
           with the proper operation of the system.
    </div>
    <br>
    <input type="button" onclick="mainFunction()"
                                         value="Submit" />
 
    <script>
        function mainFunction() {
            document.getElementById(
            "mainDIV").style.columnRule = "initial";
        }
    </script>
 
</body>
 
</html>