CSS border-bottom Property

This shorthand property sets the width, style, and color for the bottom edge of an element's box.

selector { border-bottom: width style color; }
<line-width> Defines the thickness of the bottom border using specific units like px, em, or rem, or keywords like thin, medium, or thick.
<line-style> Defines the appearance of the border line, such as solid, dashed, dotted, double, groove, ridge, inset, or outset.
<color> Defines the color of the bottom border using any valid CSS color format.

Code Examples

A basic example showing the shorthand syntax used in a style attribute to create a visual separator.

<div style="border-bottom: 2px solid #333333; padding: 10px;">
  This div has a clean, solid dark gray line at the bottom.
</div>

An advanced example using CSS transitions and JavaScript to create a dynamic underline effect for a navigation item.

<style>
  .nav-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 4px solid transparent;
    transition: border-color 0.3s ease;
  }
</style>

<div id="tab" class="nav-item">Hover or Click Me</div>

<script>
  const tab = document.getElementById("tab");
  tab.addEventListener("mouseover", () => {
    tab.style.borderBottom = "4px solid #007bff";
  });
  tab.addEventListener("mouseout", () => {
    tab.style.borderBottom = "4px solid transparent";
  });
</script>

Pro Tip

You can use border-bottom as a highly customizable alternative to text-decoration: underline. By setting a border on the bottom of an inline element, you can control the exact thickness, color, and distance of the underline from the text, giving you much more design control than standard browser underlining.

Deep Dive

The border-bottom property is a convenient shorthand that bundles border-bottom-width, border-bottom-style, and border-bottom-color into a single line of code. Think of it like the baseboard in a room; it provides a visual finish to the bottom of your element. If you omit any value, the browser uses the default for that sub-property. For example, if you omit the color, it defaults to the element's current text color. However, if you omit the style, no border will appear at all because the default style is none. This property affects the southern perimeter of the box model and will increase the total height of the element unless you have set the box-sizing property to border-box.

Best Practices

Always specify a style like solid or dashed because if you leave it out, the border defaults to none and you will wonder why your code is not working. Use shorthand to keep your stylesheets clean and lean. If you only need to change one aspect later, like the color, you can use the specific sub-property like border-bottom-color to keep your overrides specific and easy to read.

Common Pitfalls

The biggest mistake is forgetting the style value. You can set the width to 50px and the color to red, but if you do not declare it as solid or another style, nothing shows up. Another common issue is layout shift; since borders are part of the box model, adding a border-bottom on hover might push other elements down. You can prevent this by using a transparent border-bottom of the same width as a placeholder.

Accessibility

Borders are often used to separate content or highlight active states. Ensure there is enough contrast between the border color and the background so users with visual impairments can actually see the distinction. Do not rely solely on the color of a border to convey information, such as an error state, as color-blind users might miss the cue.

Dev Data Table: border-bottom property

default medium none currentcolor
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.borderBottom = "3px solid #ff0000";
js_syntax_2 element.style.setProperty("border-bottom", "3px solid #ff0000");
js_note In JavaScript, use the camelCase property borderBottom to access the style object directly.
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" }
results render here...