CSS border-bottom Property

What You’ll Learn

The border-bottom property is a CSS shorthand for styling the bottom border of an element. With one declaration you can set the border width, style, and color on the physical bottom edge only.

Definition and Usage

The border-bottom CSS property is a shorthand that sets the width, style, and color of the bottom border of an element. Unlike logical properties, it always targets the physical bottom edge regardless of writing mode or text direction.

This property is useful for creating visually distinct elements within your web design. Common uses include section dividers, list separators, active tab underlines, and footer rules.

📝 Syntax

The border-bottom shorthand sets width, style, and color on the bottom edge:

selector {
  border-bottom: <border-width> <border-style> <border-color>;
}

Basic Example

div {
  border-bottom: 2px solid red;
}

You can also set the parts individually with longhand properties:

Syntax Rules

• Values follow the usual border order: width, then style, then color.
• A visible style such as solid is required for the border to show.
• Only the bottom edge is affected; other sides keep their existing borders.
• Related side shorthands include border-top, border-left, and border-right.
• Use padding-bottom to add space between content and the bottom border.

Default Value

The default value for border-bottom comes from its longhand parts:

• border-bottom-width — medium
• border-bottom-style — none
• border-bottom-color — currentColor

Because the default style is none, no border is visible until you set a visible style such as solid.

💎 Property Values

The border-bottom shorthand accepts the same value types as other border shorthands.

Physical Bottom Edge

border-bottom always styles the visual bottom of an element, even when writing mode changes. That makes it predictable for horizontal layouts, but different from logical properties.

border-bottom vs border-block-end

Examples Gallery

Try border-bottom on divs, list items, dashed dividers, and active tab underlines.

<style>
  div {
    border-bottom: 2px solid red;
    padding-bottom: 0.75rem;
  }
</style>

<div>
  This is a div element with a bottom border.
</div>

.menu-item {
  border-bottom: 1px solid #e2e8f0;
  padding: 0.75rem 0;
}
.menu-item:last-child {
  border-bottom: none;
}

.note {
  border-bottom: 2px dashed #059669;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.tab.active {
  border-bottom: 3px solid #2563eb;
  padding-bottom: 0.35rem;
  font-weight: 700;
}

💡 Best Practices