Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style columnRuleColor Property

  • Last Updated : 31 Jul, 2019
Geek Week

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:






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

    Output :

    Before click:

    After Click:

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




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

    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:




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

    Output:

    Before click:

    After Click:

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

    • Google Chrome
    • Edge
    • Safari
    • Opera

    Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :