Open In App

HTML DOM Style columnRule Property

Improve
Improve
Like Article
Like
Save
Share
Report

The Style columnRule property in HTML DOM sets or returns the width, style, and color of the rule between the 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"

Property Values:

Property Value

Description

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: It will return a String representing the column-rule property of a selected element. 

Example 1: Set the columnRuleWidth, columnRuleStyle and columnRuleColor using columnRule property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Style columnRule Property
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        #GFG {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
            margin: auto;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>HTML DOM Style columnRule Property</h3>
 
    <div id="GFG">
        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="myGeeks()"
        value="Submit" />
 
    <script>
        function myGeeks() {
            document.getElementById("GFG")
                .style.columnRuleWidth = "3px";
 
            document.getElementById("GFG")
                .style.columnRuleStyle = "solid";
 
            document.getElementById("GFG")
                .style.columnRuleColor = "red";
        }
    </script>
</body>
 
</html>


Output: 

columnRule

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>
        body {
            text-align: center;
        }
 
        #GFG {
            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;
            margin: auto;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>HTML DOM Style columnRule Property</h3>
 
    <div id="GFG">
        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="myGeeks()"
        value="Submit" />
 
    <script>
        function myGeeks() {
            document.getElementById("GFG")
                .style.columnRule = "initial";
        }
    </script>
</body>
 
</html>


Output: 

columnRule-2

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>
        body {
            text-align: center;
        }
 
        #GFG {
            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;
            margin: auto;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>HTML DOM Style columnRule Property</h3>
 
    <div id="GFG">
        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="myGeeks()"
        value="Submit" />
 
    <script>
        function myGeeks() {
            document.getElementById("GFG")
                .style.columnRule = "inherit";
        }
    </script>
</body>
 
</html>


Output: 

columnRule-2

Note: Use MozColumnRule for Mozilla Firefox.

Supported Browsers:

  • Google Chrome 50
  • Edge 12
  • Firefox 52
  • Opera 11.1
  • Safari 9


Last Updated : 29 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads