HTML | DOM Style borderBottomColor Property

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>