ADVERTISEMENT
ADVERTISEMENT

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 »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.