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.

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>                   