CSS border-bottom-style Property

The CSS border-bottom-style property is used to specify the style of the bottom border element.

Without mentioning the style of the border-bottom or border properties the border-bottom-style will not appear.

You need to know that the specification doesn't define how borders of different styles connect in the corners.

Initial Value	none
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.borderBottomStyle = "dotted";

Syntax

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <style>
      h2 {
      border-bottom-style: solid;
      }
      div {
      border-bottom-style: dashed;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a solid bottom border</h2>
    <div>A div element with a dashed bottom border.</div>
  </body>
</html>
Click here and try it yourself!

Let’s see another example with different border bottom styles.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
      border-bottom-style: double;
      }
      p {
      border-style: solid;
      border-bottom-style: dashed;
      }
      div {
      border-bottom-style: groove;
      border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a double bottom border</h2>
    <p> A paragraph with a dashed bottom border. </p>
    <div>A div element with a groove bottom border.</div>
  </body>
</html>
Click here and try it yourself!

Values

Value	Description
none	Will show no border. Default value.
hidden	The same as "none", except in border conflict resolution for table elements.
dotted	The border is specified as a series of dots.
dashed	The border is specified as a series of dashes.
solid	The border is specified as a solid lines.
double	The border is specified as a double solid lines.
groove	It’s a 3D grooved border and gives the impression that the border is carved. Opposite of ridge.
ridge	Specifies a 3D ridged border and gives the impression of extruded appearance. Opposite of groove.
inset	It’s a 3D effect that make impression that the element appear embedded. Opposite of outset.
outset	It’s a 3D effect that make impression that the element appear embossed. Opposite of inset.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Related Resources

Border, border-style, border-color, bottom, border-bottom, border-bottom-color, border-bottom-width.

Browser support


1.0+	5.5+	12.0+	1.0+	1.0+	9.2+

Practice Your Knowledge

Which values are not correct for the border-bottom-style

grooved
dashed
doubled
dotted