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 of the border-bottom-style property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <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>

Try it Yourself »

Result

Example of the border-bottom-style property with multiple values:

<!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>

Try it Yourself »

Example of the border-bottom-style property with the "hidden" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid black;
        border-bottom-style: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Examples with border-bottom-style property</h1>
  </body>
</html>

Try it Yourself »

Example of the border-bottom-style property with the "inset" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid;
        border-bottom-style: inset;
      }
    </style>
  </head>
  <body>
    <h1>Examples with border-bottom-style property</h1>
  </body>
</html>

Try it Yourself »

Example of the border-bottom-style property with the "outset" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        border: 5px solid;
        border-bottom-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Examples with border-bottom-style property</h1>
  </body>
</html>

Try it Yourself »

Values

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