X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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

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

Let’s see another example where we added colors to <h2>, <p> and <div> elements to show the color effect.

Example

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

In this example you can use the transparent value.

Example

<!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-right-color property.

Learn more about HTML Colors.

Now, let’s see an example illustrated with hexadecimal, RGB, HSL and named color values set for the border-bottom-color.

Example

<!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
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.
transparent Indicates that the border color should be transparent. The bottom border will still take up the space defined by the border-width value.
initial Sets the property to its default value.
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