HTML | DOM Style columnRuleColor Property

The DOM Style columnRuleColor property specifies the color of the rule between columns.

Syntax :

  • For set the columnRuleColor property:
    object.style.columnRuleColor = "color|initial|inherit"
    
  • For return the columnRuleColor property:
    object.style.columnRuleColor
    

Property Values:



  • color: Used to specify the color of the rule.
  • initial: Used to set the default value.
  • inherit: Used to inherit property from parent element.

Return Value : This return a single string that representing the column-rule-color property of an element.

  1. Color: This specifies the color of the rule.
    Example-1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style columnRuleColor Property
        </title>
        <style>
            #myDIV {
                width: 90%;
                height: 70%;
                border: 2px solid green;
                padding: 10px;
                column-count: 3;
                column-rule: 3px outset red;
            }
              
            #p1 {
                font-size: 20px;
                color: green;
            }
        </style>
    </head>
      
    <body>
      
        <div id="myDIV">
            <p id="p1">
              <u>Welcome to GeeksforGeeks.!</u>
            </p>
      
            <p>
              Computer Science is the study of 
              computers and computational systems. 
              Unlike electrical and computer engineers,
              computer scientists deal mostly with 
              software and software systems; this 
              includes their theory, design, development,
              and application. Principal areas of study 
              within Computer Science include artificial
              intelligence, computer systems and networks,
              security, database systems, human computer 
              interaction, vision and graphics, numerical
              analysis, programming languages, software 
              engineering, bioinformatics and theory of
              computing. Although knowing how to program
              is essential to the study of computer science,
              it is only one element of the field. Computer
              scientists design and analyze algorithms to 
              solve programs and study the performance of 
              computer hardware and software. The problems
              that computer scientists encounter range from
              the abstract-- determining what problems can 
              be solved with computers and the complexity 
              of the algorithms that solve them – to the 
              tangible – designing applications that 
              perform well on handheld devices, that 
              are easy to use, and that uphold security
              measures.
        </div>
        <br>
      
        <input type="button" onclick="mainFunction()" 
                                           value="Submit" />
      
        <script>
            function mainFunction() {
      
                document.getElementById(
      
                        //  Define color.
                        "myDIV").style.columnRuleColor =
                    "green";
            }
        </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output :

    Before click:

    After Click:

  2. initial: This set the color of the rule to the “initial”. By default it is black.
    Example-2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style columnRuleColor Property
        </title>
        <style>
            #myDIV {
                width: 90%;
                height: 70%;
                border: 2px solid green;
                padding: 10px;
                column-count: 3;
                column-rule: 3px outset red;
            }
              
            #p1 {
                font-size: 20px;
                color: green;
            }
        </style>
    </head>
      
    <body>
      
        <div id="myDIV">
            <p id="p1">
              <u>Welcome to GeeksforGeeks.!</u>
            </p>
      
            <p>
              Computer Science is the study of 
              computers and c omputational systems.
              Unlike electrical and computer engineers,
              computer scientists deal mostly with 
              software and software systems; this 
              includes their theory, design, development,
              and application. Principal areas of study 
              within Computer Science include artificial
              intelligence, computer systems and networks,
              security, database systems, human computer 
              interaction, vision and graphics, numerical
              analysis, programming languages, software 
              engineering, bioinformatics and theory of 
              computing. Although knowing how to program
              is essential to the study of computer science,
              it is only one element of the field. Computer
              scientists design and analyze algorithms to 
              solve programs and study the performance of 
              computer hardware and software. The problems
              that computer scientists encounter range from
              the abstract-- determining what problems can 
              be solved with computers and the complexity 
              of the algorithms that solve them – to the 
              tangible – designing applications that perform
              well on handheld devices, that are easy to use,
              and that uphold security measures.
          </p>
        </div>
        <br>
      
        <input type="button" onclick="mainFunction()" 
                                           value="Submit" />
        <script>
            function mainFunction() {
      
                //  Set column color.
                document.getElementById(
                        "myDIV").style.columnRuleColor =
                    "initial";
            }
        </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Before click:

    After Click:

  3. inherit: This inherits this property from its parent element. This mean that this will make the same color as of the color of the parent element.
    Example-1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style columnRuleColor Property
        </title>
        <style>
            #myDIV {
                width: 90%;
                height: 70%;
                border: 2px solid green;
                padding: 10px;
                color: red;
                column-count: 3;
                column-rule: 3px solid green;
            }
              
            #p1 {
                font-size: 20px;
                color: green;
            }
        </style>
    </head>
      
    <body>
      
        <div id="myDIV">
            <p id="p1">
              <u>Welcome to GeeksforGeeks.!</u>
            </p>
      
            <p>
              Computer Science is the study of 
              computers and c omputational systems.
              Unlike electrical and computer engineers,
              computer scientists deal mostly with 
              software and software systems; this 
              includes their theory, design, development,
              and application. Principal areas of study 
              within Computer Science include artificial
              intelligence, computer systems and networks,
              security, database systems, human computer 
              interaction, vision and graphics, numerical
              analysis, programming languages, software 
              engineering, bioinformatics and theory of 
              computing. Although knowing how to program
              is essential to the study of computer science,
              it is only one element of the field. Computer
              scientists design and analyze algorithms to 
              solve programs and study the performance of 
              computer hardware and software. The problems
              that computer scientists encounter range from
              the abstract-- determining what problems can 
              be solved with computers and the complexity 
              of the algorithms that solve them – to the 
              tangible – designing applications that perform
              well on handheld devices, that are easy to use,
              and that uphold security measures.
          </p>    
        </div>
        <br>
        <input type="button" onclick="mainFunction()" 
                                             value="Submit" />
        <script>
            function mainFunction() {
      
                //  Set color using inherit.
                document.getElementById(
                        "myDIV").style.columnRuleColor =
                    "inherit";
            }
        </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Before click:

    After Click:

  4. Supported Browsers: The browser supported by HTML | DOM Style columnRuleColor Property are listed below:

    • Google Chrome
    • Edge
    • Safari
    • Opera


    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.