CSS border-bottom-color Property

Learn about the CSS border-bottom-color Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on April 03, 2022

Defining borders around an element makes our website captivating. We apply CSS border property to set the style, width, and color of an element's border. The border property is a shorthand property for border-width, border-style, and border-color. Each of these shorthand properties has 4 longhand properties. In this tutorial, we'll only discuss a border-bottom-color property, one of the longhand properties of border-color.

What is CSS border-bottom-color Property?

The border-bottom-color property specifies the color of the bottom border defined around an element.

Syntax:

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

Quick overview of the syntax used,

Value	Explanation
color	Users can set the color by either entering color names or CSS Legal Color Values.
transparent	Specifies that the border color is white or transparent.
initial	Specifies that the bottom border color is set by the browser only.
inherit	Specifies that the border’s color is the same as the color of its parent element's border..

The example given below illustrates CSS border-bottom-color Property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>border-bottom-color property</title>
   </head>
   
   <style>
      .container{
      border-width: 10px;
      border-style: solid;
      border-bottom-color: yellow;
      }
   </style>
   
   <body>
      <div class="container">
         <h2>This element's bottom border color is yellow.</h2>
      </div>
   </body>
</html>

Output:

CSS border-bottom-color Property | Example 1

We have defined the borders around this element. The color of the bottom border is only set to yellow by using the border-bottom-color property.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>border-bottom-color property</title>
   </head>
   
   <style>
      h1{
      border-bottom-style: solid; 
      border-bottom-color: inherit;
      border-bottom-width: 5px;
      }
      div{
      border-bottom-width: 5px;
      border-bottom-style: solid;
      border-bottom-color: #B8860B;
      }
   </style>
   
   <body>
      <h2>Welcome to IncludeHelp</h2>
      <div class="container">
         <p>At IncludeHelp, our aim is to make you an expert in Computer programming languages</p>
         <h1>Content</h1>
         <ul>
            <li>JAVA</li>
            <li>C++</li>
            <li>Data Structure</li>
         </ul>
      </div>
   </body>
</html>

Output:

CSS border-bottom-color Property | Example 2

As you can see, we have applied border-bottom-color property to both the parent and child elements. The child element (h2) inherits this property from its parent element, so the color of the border is the same.

CSS Tutorial & Examples »

The align-items Property in CSS

The vertical-align Property in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples