HTML | DOM Style columnRuleStyle Property

Last Updated : 08 Aug, 2022

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.

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

Output:

Before Click:

After Click:

Example-2: Dashed creates a dashed rule.

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

Output:

Before Click:
After Click:

Example-3: Double Creates a double rule.

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

Output:

Before Click:

After Click:

Example-4: Solid Creates a solid rule.

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

Output:

Before Click:
After Click:

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

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

Output:

Before Click:
After Click:

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

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

Output:

Before Click:
After Click:

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

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

Output:

Before Click:
After Click:

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

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

Output:

Before Click:
After Click:

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

Google Chrome 50 and above
Edge 12 and above
Internet Explorer 10 and above
Firefox 52 and above
Opera 11.1 and above
Apple Safari 9 and above

Suggest improvement

HTML | DOM Window frameElement Properties

HTML | DOM Style columnRuleWidth Property

Share your thoughts in the comments

HTML | DOM Style columnRuleStyle Property

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?