CSS border-bottom-color Property

CSS border-bottom-color property is used to specify the color of the bottom border of an element.

First you need to define the border-style or the border-bottom-style properties, because an element must have a border before you will change the color.

The bottom border color can also be defined with the border-color shorthand property.

Initial Value	currentColor
Applies to	All elements.
Inherited	No
Animatable	Yes. The color of the border-bottom is animatable.
Version	CSS1.
DOM Syntax	object.style.borderBottomColor = "blue";

Syntax

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

Example of the border-bottom-color property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom-style: solid;
        border-bottom-color: #1c87c9;
        border-bottom-width: 5px;
      }
    </style>
  </head>
  <body>
    <h2> A heading with a solid blue bottom border</h2>
  </body>
</html>

Try it Yourself »

Result

Example of the border-bottom-color property, where colors are added to different HTML elements to show the color effect:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom-style: groove;
        border-bottom-color: #8ebf42;
        border-bottom-width: 5px;
      }
      div {
        border-style: inset;
        border-bottom-color: #ccc;
        border-bottom-width: 8px;
      }
      p {
        border-style: double;
        border-bottom-color: #1c87c9;
        border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a groove green bottom border.</h2>
    <div>A div element with an inset gray bottom border.</div>
    <p>A paragraph with a double blue border.</p>
  </body>
</html>

Try it Yourself »

Example of the border-bottom-color property with the "transparent" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: #666 dashed;
        border-bottom-color: transparent;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of transparent border-bottom-color</h2>
    <div>This is an example of a div element which has a transparent border-bottom-color.</div>
  </body>
</html>

Try it Yourself »

You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the border-bottom-color property.

Learn more about HTML Colors.

Example of the border-bottom-color property with the "color" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border: 5px solid #666;
        width: 60%;
        padding: 5px;
      }
      .name {
        border-bottom-color: lightblue;
      }
      .hex {
        border-bottom-color: #1c87c9;
      }
      .rgb {
        border-bottom-color: rgba(0, 0, 0, 0.15);
      }
      .hsl {
        border-bottom-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <p class="name">Bottom border with a named color.</p>
    <p class="hex">Bottom border with a hexadecimal value.</p>
    <p class="rgb">Bottom border with a RGB color value.</p>
    <p class="hsl">Bottom border with a HSL color value.</p>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
color	Indicates the bottom border color. Default color is the color of the element. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Required value.	Play it »
transparent	Indicates that the border color should be transparent. The bottom border will still take up the space defined by the border-width value.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.