CSS border-bottom-width Property

What You’ll Learn

The border-bottom-width property sets how thick the bottom border is on an element. It is useful when you want precise control over divider weight on the bottom edge.

Definition and Usage

The border-bottom-width CSS property allows you to specify the thickness of the bottom border of an element. This property is part of the border longhand family and is used to control the width of the border along the bottom edge.

By adjusting this property, you can enhance visual separation between elements and create more defined layouts with subtle 1px dividers or prominent accent lines.

📝 Syntax

The syntax for border-bottom-width is straightforward. It accepts keyword values or length units.

selector {
  border-bottom-width: <length> | thin | medium | thick;
}

Basic Example

p {
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: black;
}

The value can be a keyword such as thin or a length such as 5px, 0.25em, or 1rem.

Syntax Rules

• The initial value is medium, typically around 3 to 4 pixels.
• Keywords: thin, medium, and thick.
• Length values use units like px, em, or rem.
• Pair with border-bottom-style and border-bottom-color for full control.
• Use border-bottom shorthand when setting width, style, and color together.

Default Value

The default value of border-bottom-width is medium, which typically corresponds to a width of around 3 to 4 pixels depending on the browser’s default settings.

💎 Property Values

The border-bottom-width property accepts keyword values and length units.

Physical Bottom Edge

border-bottom-width always sets the thickness of the visual bottom border, even when writing mode changes. For writing-mode-aware layouts, consider border-block-end-width instead.

border-bottom-width vs border-block-end-width

Examples Gallery

Try border-bottom-width with pixel lengths, keyword sizes, width comparisons, and bottom-edge overrides.

<style>
  p {
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: black;
    padding-bottom: 0.75rem;
  }
</style>

<p>
  This paragraph has a bottom border width of 5 pixels.
</p>

<style>
  h2 {
    border-bottom-width: thin;
    border-bottom-style: dashed;
    border-bottom-color: blue;
    padding-bottom: 0.5rem;
  }
</style>

<h2>This heading has a thin bottom border.</h2>

.w-1 {
  border-bottom: 1px solid #64748b;
}
.w-4 {
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #2563eb;
}
.w-8 {
  border-bottom: 8px solid #dc2626;
}

.tab-card {
  border: 1px solid #cbd5e1;
  border-bottom-width: 4px;
  border-bottom-color: #2563eb;
  padding: 1rem;
  border-radius: 0.5rem;
}

💡 Best Practices