CSS border-bottom Property

CSS border-bottom Property

The border-bottom property in CSS is a shorthand property used to set the width, style, and color of an element's bottom border in one line.

1. Syntax

selector {
  border-bottom: [border-width] [border-style] [border-color];
}

Accepted Values:

Property	Possible Values	Description
border-width	thin, medium, thick, px, em, etc.	Specifies the thickness of the bottom border.
border-style	solid, dashed, dotted, double, groove, ridge, none, etc.	Defines the border pattern.
border-color	Named colors, hex (#000), rgb(), rgba(), hsl(), etc.	Sets the color of the bottom border.

2. Example – Simple Bottom Border

.box {
  border-bottom: 3px solid red;
}

<div class="box">This has a red bottom border</div>

✅ The element will have a 3px solid red bottom border.

3. Example – Using Different Styles

.box1 { border-bottom: 5px dotted blue; }
.box2 { border-bottom: 4px dashed green; }
.box3 { border-bottom: 6px double orange; }
.box4 { border-bottom: 3px solid rgba(255, 0, 0, 0.5); } /* Semi-transparent */

<div class="box1">Dotted Bottom Border</div>
<div class="box2">Dashed Bottom Border</div>
<div class="box3">Double Bottom Border</div>
<div class="box4">Transparent Red Bottom Border</div>

✅ Each div has a different bottom border style.

4. Example – Controlling Border Thickness

.box {
  border-bottom: 10px solid #3498db;
}

✅ The bottom border will be 10px thick and blue.

5. Example – Setting Only the Style and Color

If you don’t specify the width, the browser will use the default (medium):

.box {
  border-bottom: solid purple;
}

✅ This will apply a default-width solid purple border.

6. Example – Using border-bottom-width, border-bottom-style, and border-bottom-color Separately

You can set each property individually:

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

✅ Equivalent to border-bottom: 4px dashed green;

7. Best Practices

✔ Use border-bottom shorthand for cleaner code.
✔ Always include border-style, otherwise, the border won’t appear.
✔ Use rgba() for transparency effects.
✔ Use different border styles to create unique designs.