HTML | DOM Style columnRule Property

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

    Syntax :

  • 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"
    
    Property Values:

  • 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output :
Before Click:

After Click:

Note: Use MozColumnRule for Mozilla Firefox.

    Supported Browsers: The supported browser by HTML | DOM Style columnRule Property are listed below:

  • Google Chrome
  • Edge
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.