Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of border-bottom-color property in CSS
The border-bottom-color CSS property sets the color of an element's bottom border. It only affects the color when a border style is already defined.
Syntax
border-bottom-color: color | transparent | inherit;
Parameters
The property accepts these values:
- color - Any valid CSS color value (hex, RGB, named colors)
- transparent - Makes the border invisible
- inherit - Inherits the color from parent element
Example: Basic Usage
<html>
<head>
<style>
p.demo {
border: 3px solid;
border-bottom-color: #FF0000;
padding: 10px;
}
</style>
</head>
<body>
<p class="demo">
This paragraph has a red bottom border
</p>
</body>
</html>
Example: Multiple Color Values
<html>
<head>
<style>
.box1 {
border: 2px solid;
border-bottom-color: blue;
padding: 10px;
margin: 10px 0;
}
.box2 {
border: 3px solid;
border-bottom-color: rgb(255, 165, 0);
padding: 10px;
margin: 10px 0;
}
.box3 {
border: 4px solid;
border-bottom-color: transparent;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box1">Blue bottom border</div>
<div class="box2">Orange bottom border (RGB)</div>
<div class="box3">Transparent bottom border</div>
</body>
</html>
Key Points
- The
border-bottom-colorproperty only works when a border style is defined - If no border style exists, the color property has no visible effect
- This property only affects the bottom border, leaving other borders unchanged
- Works with all CSS color formats: hex (#FF0000), RGB, HSL, and named colors
Conclusion
The border-bottom-color property provides precise control over bottom border colors. Always ensure a border style is defined first, then apply the desired color using any valid CSS color value.
Updated on: 2026-03-15T23:18:59+05:30
72 Views
Advertisements