HTML | DOM Style columnRuleColor Property

Last Updated : 7 Jul, 2022
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: html
    <!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: html
    <!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: html
    <!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:
    4. Supported Browsers: The browser supported by HTML | DOM Style columnRuleColor Property are listed below:
  • Google Chrome 50 and above
  • Edge 12 and above
  • Firefox 52 and above
  • Internet Explorer 10 and above
  • Safari 9 and above
  • Opera 11.1 and above
Comment

Explore