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

border-bottom

Definition

The border-bottom property is a CSS shorthand property that sets the values for the border-bottom-width, border-bottom-style, and border-bottom-color properties.

Examples

Solid, 1 pixel wide, red border

.element {
  border-bottom: 1px solid #ff0000;
}

Dotted, 2 pixels wide, blue border

.element {
  border-bottom: 2px dotted blue;
}

No border

.element {
  border-bottom: none;
}

Hidden border

.element {
  border-bottom: hidden;
}

Double border

.element {
  border-bottom: double;
}

Groove border

.element {
  border-bottom: groove;
}

Ridge border

.element {
  border-bottom: ridge;
}

Inset border

.element {
  border-bottom: inset;
}

Outset border

.element {
  border-bottom: outset;
}

Values

ValueDescription
<border-width> <br> <border-style> <br> <color>Specifies the width, style, and color of the border.
noneNo border is drawn.
hiddenA hidden border is drawn.
dottedA dotted border is drawn.
dashedA dashed border is drawn.
solidA solid border is drawn.
doubleA double border is drawn.
grooveA 3D groove border is drawn.
ridgeA 3D ridge border is drawn.
insetA 3D inset border is drawn.
outsetA 3D outset border is drawn.
initialSets the border-bottom to its default value.
inheritThe element inherits the border-bottom value from its parent element.
unsetThe element's border-bottom 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 a reasonable width value for the border to avoid creating borders that are too thin or too thick.
  • 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 property in conjunction with the border-bottom-width and border-bottom-color 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 border for subheadings.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes