1. css
  2. /properties
  3. /border-bottom-style

border-bottom-style

Definition

The border-bottom-style property is a CSS property that specifies the style of the bottom border of an element. It is used to control the appearance of the element's bottom border.

Examples

No border

.element {
  border-bottom-style: none;
}

Hidden border

.element {
  border-bottom-style: hidden;
}

Dotted border

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

Dashed border

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

Solid border

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

Double border

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

Groove border

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

Ridge border

.element {
  border-bottom-style: ridge;
}

Inset border

.element {
  border-bottom-style: inset;
}

Outset border

.element {
  border-bottom-style: outset;
}

Values

ValueDescription
noneNo border is drawn.
hiddenSame as none, but has different behavior in some contexts.
dottedThe border is a series of dots.
dashedThe border is a series of short lines.
solidThe border is a solid line.
doubleThe border is two solid lines.
grooveThe border looks like a groove.
ridgeThe border looks like a ridge.
insetThe border looks like it is embedded in the element.
outsetThe border looks like it is coming out of the element.
initialSets the border-bottom-style to its default value.
inheritThe element inherits the border-bottom-style value from its parent element.
unsetThe element's border-bottom-style is set to the value specified in the user agent's style sheet, if any. If there is none, it will be the default value.

Best Practices

  • Use the appropriate border style for the context and design of your site.
  • Avoid using too many different border styles on a single page as it can be visually overwhelming.
  • Make sure the border style matches the overall design and layout of your site.
  • Use the border-bottom-style property in conjunction with the border-bottom-color and border-bottom-width properties to fully define the bottom border of an element.
  • Consider the layout and hierarchy of your content when deciding which border style to use. For example, you may want to use a solid border for header elements but a dotted

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes