CSS border-bottom-color Property

CSS border-bottom-color property specifies the color of the element’s bottom border.

This paragraph has a blue color bottom border.

The color value can be specified in any valid CSS color format like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. Refer to the example below:

Example:

h1{
 border-bottom-color: red;  /* Color Name */
}
h2{
  border-bottom-color: #008000; /* HEX Value */
}
p{
  border-bottom-color: rgba(0,0,255);  /* RGBA Value */
}

Note: An element must have a border before applying border-bottom-color property to it. Otherwise, the border-bottom-color property has no effect on the element.


If the border color is not specified, it will be same as the element’s text color. See the example below:

Example:

h1{
  border-bottom-style: solid; /* Set a solid border without any color */
  color: red; /* Set text color */
}

CSS Syntax

The border-bottom-color property has the following syntax:

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

Property Values

The border-bottom-color property accepts the following values:

colorSpecifies the color of the bottom border. The default value is the current color of the element. The color value can be specified in any valid CSS format like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.
transparentSpecifies a transparent border.
initialSets the border-bottom-color property to its default value. Which is the current color of the element.
inheritInherits the border-bottom-color value from its parent element.

General Info

Default ValueThe current color of the element.
InheritedNo
JavaScript Usageelement.style.borderBottomColor = “red”

More Examples

A transparent border can also be specified by applying border-bottom-color: transparent; to the element. See the example below:

Example:

h1{
  border-style: solid;
  border-bottom-color: transparent;
}

Set the color of the bottom border using the ‘HSL’ format:

Example:

h1{
  border-bottom-color: hsl(120, 100%, 50%);
}

Related Pages

CSS Tutorial: CSS Borders