Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Topics

CSS border-bottom-color Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 18 - Views
⏳ 4 mins
💬 1 Comment
CSS border-bottom-color Property

Photo Credit to CodeToFun

🙋 Introduction

The border-bottom-color property in CSS is used to specify the color of the bottom border of an element.

This property is particularly useful when you want to style the bottom border differently from the other borders. By customizing the bottom border color, you can create distinct visual effects and emphasize certain sections of your design.

💡 Syntax

The syntax for the border-bottom-color property is simple and follows the standard CSS color value conventions.

Syntax
Copied
Copy To Clipboard
element {
  border-bottom-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the border-bottom-color property is the current color of the element, as set by the color property. If not specified, the bottom border color will inherit the color of the text within the element.

🏠 Property Values

ValueDescription
named-colorA color keyword, such as blue, red, green, etc.
hexadecimal valueA hex code representing a color, such as #ff5733.
RGB valueAn RGB color value, such as rgb(255, 87, 51).
HSL valueAn HSL color value, such as hsl(9, 100%, 60%).
transparentSpecifies that the bottom border should be transparent.

📄 Example

In this example, we'll change the bottom border color of a div element to red.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-bottom-color Example</title>
  <style>
    .example {
      border: 2px solid black;
      border-bottom-color: red;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Bottom Border Color</h1>
  <div class="example">
    This div has a bottom border color of red.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-bottom-color property is widely supported across all modern browsers. This includes the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Given its broad compatibility, you can confidently use this property in your web designs without worrying about browser support.

🎉 Conclusion

The border-bottom-color property is a straightforward yet powerful CSS tool for customizing the bottom border of an element. Whether you're aiming to create a unique design or simply emphasize a particular part of your layout, this property allows you to achieve your desired effect with ease. Experiment with different colors and see how this property can enhance the visual appeal of your web projects.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy