CSS border-bottom-width Property

CSS border-bottom-width Property

The border-bottom-width property in CSS is used to specify the thickness (width) of the bottom border of an element.

1. Syntax

selector {
  border-bottom-width: value;
}

Accepted Values:

• thin → A thin bottom border

• medium (default) → A medium bottom border

• thick → A thick bottom border

• Length values → Custom width using units like px, em, rem, %, etc.

2. Example – Using Named Widths (thin, medium, thick)

.box1 {
  border-bottom-width: thin;
}

.box2 {
  border-bottom-width: medium;
}

.box3 {
  border-bottom-width: thick;
}

<div class="box1">Thin Bottom Border</div>
<div class="box2">Medium Bottom Border</div>
<div class="box3">Thick Bottom Border</div>

✅ The bottom border of each box will have a different thickness.

3. Example – Using Custom Pixel Values

.box {
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: blue;
}

<div class="box">Custom 5px Bottom Border</div>

✅ The div will have a 5px solid blue bottom border.

4. Example – Using em and % Units

.box {
  border-bottom-width: 0.2em;
  border-bottom-style: solid;
  border-bottom-color: red;
}

✅ This sets the bottom border width based on the element’s font size.

5. Example – Using border-bottom Shorthand

Instead of setting border-bottom-width separately, you can use the border-bottom shorthand:

.box {
  border-bottom: 4px dashed green;
}

✅ This is equivalent to:

.box {
  border-bottom-width: 4px;
  border-bottom-style: dashed;
  border-bottom-color: green;
}

6. Best Practices

✔ Always define border-bottom-style (e.g., solid, dashed, dotted), or the border won't appear.
✔ Use px, em, or rem for precise control over border thickness.
✔ Use the border-bottom shorthand for cleaner, more efficient CSS.