Skip to content
Related Articles

Related Articles

HTML | DOM Style borderColor Property
  • Last Updated : 30 Dec, 2020

The DOM Style borderColor property specifies the color of the element’s border. It may be given explicitly, inherit from the parent or by default it will take the default value.

Syntax:

  • To get the border color property:
    object.style.borderColor
  • To set the border color property:
    object.style.borderColor = "color | transparent | initial |
    inherit"

Return value: It returns a string value which represents color of the border.

Property Values

  • color: It specifes the border color of corresponding element. Black is default color.
  • transparent: It sets the border color of corresponding element to transparent.
  • inherit: When no value specified for this field, it is inherited from the parent of element. If there is no parent means this element is root then it takes initial(or default) value.
  • initial: This keyword applies the initial(or default) value of a property to an element. The initial value should not be confused by the value specified by the browser’s style sheet. When borderColor sets to initial, It appears black(default) color.

      Example: In this example you will see how to set color of the border



    • Syntax:
      borderColor: "red";
    • Programe:




      <!DOCTYPE html>
      <html>
        
      <head>
          <style>
              #GFG_Div {
                  width: 200px;
                  text-align: center;
                  font-size: 20px;
                  margin-left: 210px;
                  margin-top: 20px;
                  border: thick solid red;
              }
          </style>
      </head>
        
      <body align="center">
          <button onclick="GFG_Function()">
              Change border color
          </button>
          <div id="GFG_Div">GeeksforGeeks</div>
          <br>
          <script>
              function GFG_Function() {
                  document.getElementById("GFG_Div")
                      .style.borderColor = "green";
              }
          </script>
        
      </body>
        
      </html>
    • Output:

      Before click on the button:

      After click on button:

  • Syntax:
    borderColor: "red green";
  • Programe:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            #GFG_Div {
                width: 200px;
                text-align: center;
                font-size: 20px;
                margin-left: 210px;
                margin-top: 20px;
                border: thick solid red;
            }
        </style>
    </head>
      
    <body align="center">
        <button onclick="GFG_Function()">
            Change border color
        </button>
        <div id="GFG_Div">GeeksforGeeks</div>
        <br>
        <script>
            function GFG_Function() {
                document.getElementById("GFG_Div")
                    .style.borderColor = "red green";
            }
        </script>
      
    </body>
      
    </html>
  • Output:
    Before click on the button:

    After click on button:
  • Syntax:
    borderColor: "red green blue";
  • Program:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            #GFG_Div {
                width: 200px;
                text-align: center;
                font-size: 20px;
                margin-left: 210px;
                margin-top: 20px;
                border: thick solid red;
            }
        </style>
    </head>
      
    <body align="center">
        <button onclick="GFG_Function()">
            Change border color
        </button>
        <div id="GFG_Div">GeeksforGeeks</div>
        <br>
        <script>
            function GFG_Function() {
                document.getElementById("GFG_Div")
                    .style.borderColor = "red green blue";
            }
        </script>
      
    </body>
      
    </html>
  • Output:
    Before click on the button:

    After click on button:

  • Syntax:
    borderColor: "red green blue orange";
  • Program:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            #GFG_Div {
                width: 200px;
                text-align: center;
                font-size: 20px;
                margin-left: 210px;
                margin-top: 20px;
                border: thick solid red;
            }
        </style>
    </head>
      
    <body align="center">
        <button onclick="GFG_Function()">
            Change border color
        </button>
        <div id="GFG_Div">GeeksforGeeks</div>
        <br>
        <script>
            function GFG_Function() {
                document.getElementById("GFG_Div")
                    .style.borderColor = "red green blue orange";
            }
        </script>
      
    </body>
      
    </html>

    Output:
    Before click on the button:

    After click on button:

    Example:Here you will see the use of transparent It sets the border color of the corresponding element to transparent.

  • Syntax:
    borderColor = "transparent"
  • Programe:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            #GFG_Div {
                width: 200px;
                text-align: center;
                font-size: 20px;
                margin-left: 210px;
                margin-top: 20px;
                border: thick solid red;
            }
        </style>
    </head>
      
    <body align="center">
        <button onclick="GFG_Function()">
            Transparent border color
        </button>
        <div id="GFG_Div">GeeksforGeeks</div>
        <br>
        <script>
            function GFG_Function() {
                document.getElementById("GFG_Div")
                    .style.borderColor = "transparent";
            }
        </script>
      
    </body>
      
    </html>
  • Output:
    Before click on the button:

    After click on the button:

    Browser Support: The browser supported by DOM Style borderColor property are listed below:

    • Google Chrome 1.0
    • Internet Explorer 4.0
    • Mozilla firefox 1.0
    • Opera 3.5
    • Safari 1.0
    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :