HTML | DOM Style columnRuleStyle Property

The DOM style columnRuleStyle Property in HTML is used to define or determine the style of rule between columns.

Syntax :

  • To set the property:
    object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid|
    double|groove|ridge|inset|outset|initial|inherit"
    
  • To return the property:
    object.style.columnRuleStyle"
    

Property Values:

Value Effect
none No border is created. This is the default value.
hidden Visually same as ‘none’, except it helps during border conflict resolution in table elements.
dotted Dots are used as the border.
dashed A dashed line is used as the border.
solid A single solid line is used as the border.
double Two lines are used as the border.
groove A 3D grooved border is displayed. The effect depends on border-color value.
ridge A 3D ridged border is displayed. The effect depends on border-color value.
inset A 3D inset border is displayed. The effect depends on border-color value.
outset A 3D outset border is displayed. The effect depends on border-color value.
initial Sets the property to its initial value.
inherit Sets the property to inherit from its parent.

Return Value It returns a string that represents property of the element.

Example-1: Dotted creates a dotted rule.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRuleStyle Property
    </title>
    <style>
        #gfgdiv {
            column-count: 4;
            column-rule: 5px green;
        }
    </style>
</head>
  
<body>
  
    <div class="container" style="color:green" id="gfgdiv">
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
    </div>
    
    <p>To view the effect click on the button below:</p>
    <button onclick="GFGFunction()">Click</button>
    <script>
        function GFGFunction() {
            
            //  Set dotted property.
            document.getElementById(
          "gfgdiv").style.columnRuleStyle = "dotted";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

    Before Click:
  • After Click:

Example-2: Dashed creates a dashed rule.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRuleStyle Property
    </title>
    <style>
        #gfgdiv {
            column-count: 4;
            column-rule: 5px green;
        }
    </style>
</head>
  
<body>
  
    <div class="container" style="color:green"
         id="gfgdiv">
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
    </div>
    
    <p>To view the effect click on the button below:</p>
    
    <button onclick="GFGFunction()">Click</button>
    <script>
        function GFGFunction() {
  
            document.getElementById(
            "gfgdiv").style.columnRuleStyle = "dashed";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

  • Before Click:
  • After Click:

Example-3: Double Creates a double rule.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRuleStyle Property
    </title>
    <style>
        #gfgdiv {
            column-count: 4;
            column-rule: 5px green;
        }
    </style>
</head>
  
<body>
  
    <div class="container" style="color:green" 
         id="gfgdiv">
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
    </div>
    
    <p>To view the effect click on the button below:</p>
    <button onclick="GFGFunction()">Click</button>
    <script>
        function GFGFunction() {
  
            document.getElementById(
            "gfgdiv").style.columnRuleStyle = "double";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

    Before Click:
  • After Click:

Example-4: Solid Creates a solid rule.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRuleStyle Property
    </title>
    <style>
        #gfgdiv {
            column-count: 4;
            column-rule: 5px green;
        }
    </style>
</head>
  
<body>
  
    <div class="container" style="color:green" 
         id="gfgdiv">
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
    </div>
    <p>To view the effect click on the button below:</p>
    
    <button onclick="GFGFunction()">Click</button>
    <script>
        function GFGFunction() {
  
            document.getElementById(
              "gfgdiv").style.columnRuleStyle = "solid";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

  • Before Click:
  • After Click:

Example-5: Groove Creates a 3D grooved rule.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRuleStyle Property
    </title>
    <style>
        #gfgdiv {
            column-count: 4;
            column-rule: 5px green;
        }
    </style>
</head>
  
<body>
  
    <div class="container" style="color:green" 
         id="gfgdiv">
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
    </div>
    
    <p>To view the effect click on the button below:</p>
    <button onclick="GFGFunction()">Click</button>
    <script>
        function GFGFunction() {
  
            document.getElementById(
              "gfgdiv").style.columnRuleStyle = "groove";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

  • Before Click:
  • After Click:

Example-6: Ridge Creates a 3D ridged rule.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRuleStyle Property
    </title>
    <style>
        #gfgdiv {
            column-count: 4;
            column-rule: 5px green;
        }
    </style>
</head>
  
<body>
  
    <div class="container" style="color:green" 
         id="gfgdiv">
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
    </div>
    
    <p>To view the effect click on the button below:</p>
    <button onclick="GFGFunction()">Click</button>
    <script>
        function GFGFunction() {
  
            document.getElementById(
              "gfgdiv").style.columnRuleStyle = "ridge";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

  • Before Click:
  • After Click:

Example-7: Inset Creates a 3D inset rule.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRuleStyle Property
    </title>
    <style>
        #gfgdiv {
            column-count: 4;
            column-rule: 5px green;
        }
    </style>
</head>
  
<body>
  
    <div class="container" style="color:green" 
         id="gfgdiv">
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
    </div>
    <p>To view the effect click on the button below:</p>
    <button onclick="GFGFunction()">Click</button>
    <script>
        function GFGFunction() {
  
            document.getElementById(
              "gfgdiv").style.columnRuleStyle = "inset";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

  • Before Click:
  • After Click:

Example-8: Outset Creates a 3D outset rule.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style columnRuleStyle Property
    </title>
    <style>
        #gfgdiv {
            column-count: 4;
            column-rule: 5px green;
        }
    </style>
</head>
  
<body>
  
    <div class="container" style="color:green" 
         id="gfgdiv">
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks geeksforgeeks 
      geeksforgeeks geeksforgeeks geeksforgeeks
    </div>
    
    <p>To view the effect click on the button below:</p>
    <button onclick="GFGFunction()">Click</button>
    <script>
        function GFGFunction() {
  
            document.getElementById(
              "gfgdiv").style.columnRuleStyle = "outset";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:

  • Before Click:
  • After Click:

Supported Browsers The browsers that support the HTML | DOM Style columnRuleStyle Property are as follows

  • Google Chrome
  • Internet Explorer
  • Opera
  • Apple 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.