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.

Watch a video course   CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

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>

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>

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>

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>

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.

Browser support
1.0+ 1.0+ 1.0+ 9.2+

Practice Your Knowledge

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


Prev
Next

Related Resources

Do you find this helpful?

Related articles