CSS border-bottom-style Property

CSS border-bottom-style Property

The border-bottom-style property in CSS is used to define the style of the bottom border of an element. It works in conjunction with border-bottom-width and border-bottom-color.

1. Syntax

selector {
  border-bottom-style: value;
}

Accepted Values:

Value	Description
none	No border (default).
solid	A single solid line.
dotted	A series of dots.
dashed	A series of short dashes.
double	Two solid lines.
groove	A 3D grooved effect.
ridge	A 3D ridged effect.
inset	A 3D inset effect.
outset	A 3D outset effect.

2. Example – Applying Different Border Styles

.box1 {
  border-bottom-style: solid;
}

.box2 {
  border-bottom-style: dashed;
}

.box3 {
  border-bottom-style: dotted;
}

.box4 {
  border-bottom-style: double;
}

.box5 {
  border-bottom-style: groove;
}

<div class="box1">Solid Bottom Border</div>
<div class="box2">Dashed Bottom Border</div>
<div class="box3">Dotted Bottom Border</div>
<div class="box4">Double Bottom Border</div>
<div class="box5">Groove Bottom Border</div>

✅ Each div will have a different bottom border style.

3. Example – Using border-bottom Shorthand

Instead of defining each property separately, you can use border-bottom shorthand:

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

✅ This is the same as writing:

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

4. Example – 3D Effects (groove, ridge, inset, outset)

These styles create a 3D effect, and their appearance depends on the border color:

.box1 {
  border-bottom: 4px groove gray;
}

.box2 {
  border-bottom: 4px ridge gray;
}

.box3 {
  border-bottom: 4px inset gray;
}

.box4 {
  border-bottom: 4px outset gray;
}

5. Best Practices

✔ Always define border-bottom-style; otherwise, the border won't be visible.
✔ Use border-bottom shorthand for cleaner CSS.
✔ Choose solid, dotted, or dashed for the most commonly used styles.