Tag border-bottom-width

📏 CSS border-bottom-width: Controlling the Thickness of the Bottom Border

Borders define the edges of elements, and controlling their thickness is key for clear, balanced designs. The CSS property border-bottom-width lets you specify exactly how thick the bottom border of an element should be.

🧾 What is border-bottom-width?

The border-bottom-width property sets the thickness of the bottom border line. Unlike the shorthand border-bottom, this property only affects the border’s width, not its style or color.

🧬 Syntax

selector {
  border-bottom-width: <length> | thin | medium | thick;
}
  • <length> — units like px, em, rem, vh, etc. (e.g., 5px)
  • Keyword values:
    • thin (usually around 1px),
    • medium (default, usually 3-4px),
    • thick (usually 5px or more)

🎯 Usage Examples

1. Thin bottom border

hr {
  border-bottom-width: thin;
  border-bottom-style: solid;
  border-bottom-color: #999;
}

Creates a subtle, thin line.

2. Custom pixel thickness

div.separator {
  border-bottom-width: 6px;
  border-bottom-style: dashed;
  border-bottom-color: #007BFF;
}

A thick, dashed blue bottom border for emphasis.

3. Medium default border width

p {
  border-bottom-width: medium;
  border-bottom-style: dotted;
  border-bottom-color: grey;
}

Applies a standard dotted line with medium thickness.

🔍 How It Works

  • The property only affects the bottom border’s thickness.
  • It must be combined with a border style other than none to be visible.
  • If the width is set to zero (0 or 0px), the bottom border won’t show.
  • Keywords (thin, medium, thick) are convenient but can vary slightly across browsers.

🛠️ Tips and Best Practices

  • Use pixel or relative units (em, rem) for consistent control over thickness.
  • Match border thickness with your design’s scale for balance.
  • Don’t use overly thick borders on small elements to avoid overwhelming the layout.
  • For animations, you can transition border-bottom-width smoothly to create effects like expanding underlines.

✅ Summary

The border-bottom-width property is your go-to for defining how thick the bottom border of an element is. Alongside border-bottom-style and border-bottom-color, it lets you craft precise and visually appealing borders on the bottom edge.