HTML | DOM Style borderColor Property

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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Output:

      Before click on the button:

      After click on button:

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:
    Before click on the button:

    After click on button:

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:
    Before click on the button:

    After click on button:

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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
    • Mozila firefox 1.0
    • Opera 3.5
    • Safari 1.0


    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.