CSS border-bottom-color Property

CSS border-bottom-color

The border-bottom-color property in CSS specifies the color of an element’s bottom border. This property allows you to control the appearance of the bottom border color independently, enabling more customization for your design.

Syntax of border-bottom-color

</>

Copy

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

Values

Value	Description
`color`	Specifies the color of the bottom border. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255,0,0,0.5)`).
`transparent`	Makes the bottom border fully transparent.
`initial`	Sets the property to its default value (`currentColor`, which matches the current text color).
`inherit`	Inherits the value from its parent element.

Default Value

currentColor (inherits the current text color)

Examples for border-bottom-color

Using the CSS border-bottom-color Property

The following examples demonstrate how to use the border-bottom-color property to set the color of the bottom border.

</>

Copy

/* Set the bottom border color to blue */
.element {
  border-bottom-color: blue;
}

/* Make the bottom border color transparent */
.element {
  border-bottom-color: transparent;
}

/* Use a specific RGBA color for the bottom border */
.element {
  border-bottom-color: rgba(255, 0, 0, 0.5);
}

/* Inherit the bottom border color from the parent */
.element {
  border-bottom-color: inherit;
}

Example for a Red Bottom Border

Below is an example demonstrating how to use border-bottom-color: red to apply a red color to the bottom border:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    padding: 20px;
    border-bottom: 5px solid;
    border-bottom-color: red;
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Example for a Bottom Border with RGBA Color

border-bottom-color: rgba(155, 0, 255, 0.5);

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    padding: 20px;
    border-bottom: 5px solid;
    border-bottom-color: rgba(155, 0, 255, 0.5);
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Browser Support

The border-bottom-color property is supported in all major browsers. Below is a compatibility table:

Browser	Version
Chrome	1.0
Edge	4.0
Firefox	1.0
Safari	1.0
Opera	3.5

TutorialKart

CSS border-bottom-color Property