Skip to content
Related Articles

Related Articles

HTML | DOM Style columnRuleWidth Property

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2022

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. 

html




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

Output: 

Before Click on the button: 

After Click on the button: 

Example 2: This example describes medium property value. 

html




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

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 50 and above
  • Edge 12 and above
  • Firefox 52 and above
  • Internet Explorer 10 and above
  • Opera 11.1 and above
  • Apple Safari 9 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!