CSS border-bottom-color Property

Sets the color of an element's bottom border.

selector { border-bottom-color: value; }

<color>	Sets the color using name keywords, hex codes, RGB, RGBA, HSL, or HSLA values.
transparent	Sets the bottom border color to be fully see-through.
inherit	Adopts the border-bottom-color value from the parent element.
initial	Resets the property to its default value, which is currentcolor.
revert	Resets the property to the value established by the user-agent stylesheet.
unset	Resets the property to its natural value, behaving like inherit or initial depending on context.

Code Examples

A basic example showing the individual properties required to make the bottom border color visible.

<div style="border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #ff9900;">This element has a solid orange bottom border.</div>

An advanced example using JavaScript to dynamically change the bottom border color when the user hovers over the element.

<div id="status-bar" style="padding: 15px; border-bottom: 4px solid #cccccc;">System Status</div>
<script>
const statusBox = document.getElementById("status-bar");
statusBox.addEventListener("mouseenter", () => {
  statusBox.style.borderBottomColor = "#4caf50";
});
statusBox.addEventListener("mouseleave", () => {
  statusBox.style.setProperty("border-bottom-color", "#cccccc");
});
</script>

Pro Tip

You can use a transparent border-bottom-color to act as a placeholder. This reserves the physical space for the border so that when you change the color on hover, the rest of your layout does not jump or shift because the width was already there.

Deep Dive

Think of border-bottom-color as the paint for the bottom edge of a box. Before the paint shows up, you must have a physical border to paint on. This means you have to define a border-bottom-style (the brush stroke) and a border-bottom-width (the thickness). If the style is set to none, the color will not appear because there is no surface for it to stick to. By default, it uses currentcolor, which means it will automatically match the text color of the element unless you specify a custom color. It is a specific sub-property of the border-bottom shorthand property.

Best Practices

If you are setting the width, style, and color at the same time, use the border-bottom shorthand property to keep your CSS clean and readable. Use border-bottom-color specifically when you only need to override or animate the color on its own, such as during a hover state or a transition. Using currentcolor is a smart way to keep your borders synchronized with text changes without manual updates.

Common Pitfalls

The most common mistake is forgetting to set a border-bottom-style. If you set a color and a width but the style is missing or set to none, the border remains invisible. It is like buying a bucket of paint but never picking up a brush. Also, remember that border-bottom-color only affects the bottom edge; if you want to change all four sides, use the border-color property instead.

Accessibility

Ensure that the contrast ratio between the border color and the background is high enough for users with visual impairments to see it. If the border color is used to convey information, like an error state or an active tab, do not rely on color alone. Use thickness or a change in style to ensure that color-blind users can still understand the context.

Dev Data Table: border-bottom-color property

default	currentcolor
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1998
js_syntax_1	element.style.borderBottomColor = "#ff0000";
js_syntax_2	element.style.setProperty("border-bottom-color", "#ff0000");
js_note	When using the style object property, use camelCase. When using setProperty, use the standard kebab-case string.
browsers	{ "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1", "Opera": "3.5", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10.1" }