Skip to content
Related Articles

Related Articles

HTML | DOM Style borderBottomColor Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 09 Aug, 2022

The Style borderBottomColor property in HTML DOM is used to set or return the color of bottom border of an element.

Syntax: 

  • It returns the borderBottomColor property. 
object.style.borderBottomColor
  • It is used to set the borderBottomColor property. 
object.style.borderBottomColor = "color|transparent|initial|
inherit"

Property Values: 

  • color: It specifies the bottom border color of corresponding element. The default color is black.
  • transparent: It sets the bottom border color of corresponding element to transparent.
  • initial: It sets the borderBottomColor property to its default value.
  • Inherit: This property is inherited from its parent element.

Return Value: It returns a string which represents the color of bottom border of an element.

Example 1: This example changes the color of bottom border to black. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        Style borderBottomColor Property
    </title>
    <style>
        #GFG_Div {
            width: 400px;
            margin-left: 210px;
            border: thick solid green;
        }
    </style>
</head>
 
<body align="center">
     
    <div id="GFG_Div">
        <h1>GeeksforGeeks</h1>
        <h2>
            DOM Style borderBottomColor Property
        </h2>
         
<p>
            Click to change the bottom border
            color of an element
        </p>
 
    </div>
    <br>
    <button type="button" onclick="myGeeks()">
        Click to change
    </button>
     
    <!-- Script to use Style borderBottomColor
        Property -->
    <script>
        function myGeeks() {
            document.getElementById("GFG_Div")
                .style.borderBottomColor = "blue";
        }
    </script>
</body>
</html>

Output: 

  • Before clicking the button: 

  • After clicking the button: 

Example 2: This example changes the color of bottom border to transparent value. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        Style borderBottomColor Property
    </title>
     
    <style>
        #GFG_Div {
            width: 400px;
            margin-left: 210px;
            border: thick solid green;
        }
    </style>
</head>
<body align="center">
     
    <div id="GFG_Div">
        <h1>GeeksforGeeks</h1>
        <h2>
            DOM Style borderBottomColor Property
        </h2>
         
<p>
            Click to change the bottom border
            color of an element
        </p>
 
    </div>
    <br>
    <button type="button" onclick="myGeeks()">
        Click to change
    </button>
     
    <!-- Script to use Style borderBottomColor
        Property -->
    <script>
        function myGeeks() {
            document.getElementById("GFG_Div")
            .style.borderBottomColor = "transparent";
        }
    </script>
</body>
</html>

Output: 

  • Before clicking the button: 

  • After clicking the button: 

Supported Browsers: The browser supported by Style borderBottomColor Property are listed below: 

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!