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>

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>

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>

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>

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.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Which color values can be used to setting border-bottom-color?



Do you find this helpful?

Related articles