Related Articles

Related Articles

HTML | DOM Style borderBottomColor Property
  • Difficulty Level : Basic
  • Last Updated : 29 Jul, 2019

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 specifes 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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :