HTML | DOM Style columnRuleWidth Property

The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns.

Syntax:

  • It returns the columnRuleWidth property.
    object.style.columnRuleWidth
  • It is used to set columnRuleWidth property.
    object.style.columnRuleWidth = "medium|thin|thick|length|
    initial|inherit"

Property Values:



  • thin: It is used to set a thin rule between the columns.
  • medium: It is used to create a medium width rule between the columns. It is the default width.
  • thick: It creates a thick width rule between the columns.
  • length: It is used to set the width by length. It does not takes negative value.
  • initial: It is used to set columnRuleWidth property to its default value.
  • inherit: This property is inherited from its parent.

Return Value: It returns a string that represents the column-rule-width property of the element.

Example 1: This example describes the length property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        HTML | DOM Style columnRuleWidth Property
    </title>
    <style>
        #GFG {
              
            /* For old Chrome and Safari browsers */
            -webkit-column-count:4;
            -webkit-column-rule: 1px green solid;
              
            /* For Firefox browser */
            -moz-column-count:4;
            -moz-column-rule: 1px green solid;
              
            -webkit-column-count:4;
            -webkit-column-rule: 1px green solid;
            text-align:justify;
        }
    </style>
</head>
  
<body>
    <div id = "GFG">
        Prepare for the Recruitment drive of product 
        based companies like Microsoft, Amazon, Adobe 
        etc with a free online placement preparation 
        course. The course focuses on various MCQ's  
        & Coding question likely to be asked in the  
        interviews & make your upcoming placement 
        season efficient and successful. 
    </div>
  
    <p>
        Click on the button to change the
        column-rule width
    </p>
  
    <button onclick = "myGeeks()">
        Click Here!
    </button>
  
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.columnRuleWidth
                    = "10px";
        }
    </script>
</body>
  
</html>                                

chevron_right


Output:
Before Click on the button:

After Click on the button:

Example 2: This example describes medium property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        HTML | DOM Style columnRuleWidth Property
    </title>
    <style>
        #GFG {
              
            /* For old Chrome and Safari browsers */
            -webkit-column-count:4;
            -webkit-column-rule: 1px green solid;
              
            /* For Firefox browser */
            -moz-column-count:4;
            -moz-column-rule: 1px green solid;
              
            -webkit-column-count:4;
            -webkit-column-rule: 1px green solid;
            text-align:justify;
        }
    </style>
</head>
  
<body>
    <div id = "GFG">
        Prepare for the Recruitment drive of product 
        based companies like Microsoft, Amazon, Adobe 
        etc with a free online placement preparation 
        course. The course focuses on various MCQ's  
        & Coding question likely to be asked in the  
        interviews & make your upcoming placement 
        season efficient and successful. 
    </div>
  
    <p>
        Click on the button to change the
        column-rule width
    </p>
  
    <button onclick = "myGeeks()">
        Click Here!
    </button>
  
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.columnRuleWidth
                    = "medium";
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before Click on the button:

After Click on the button:

Supported Browsers: The browser supported by DOM Style columnRuleStyle property are listed below:

  • Google Chrome
  • Firefox use MozColumnRuleWidth
  • 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.