Open In App
Related Articles

CSS border-bottom-color Property

Improve Article
Save Article
Like Article

The CSS border-bottom-color property is used to set the color of the bottom border of an element. It is mandatory to declare the border-style or border-bottom-style property before using the border-bottom-color property always as there must exist a border first before we change its color.

The current value of the element is the default color of this property. CSS border-bottom-property is animatable but cannot be inherited.


border-bottom-color: color|transparent|initial|inherit;

Default Value : It s default value is initial.

Property Values: The border-bottom-color property values are listed below: 

  • color: It specifies the color of the bottom border.
  • transparent: It specifies that the border color should be transparent.
  • initial: It is used to set its default value.
  • inherit: It is used when an element inherits this property from its parent element.



<!DOCTYPE html>
        CSS | border-bottom-color Property
        h1 {
            border-bottom-style: solid;
            border-bottom-color: green;
        div {
            border-style: solid;
            border-bottom-color: green;
    <div>I am a div with green bottom border. </div


Supported Browsers: The browsers supported by border-bottom-color property are listed below: 

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Safari 1.0 and above
  • Opera 3.5 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 01 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials