W3docs
en
Log in

CSS border-bottom-style Property

The CSS border-bottom-style property is used to specify the style of the bottom border element. See examples and try them yourself.

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

The border-bottom-style property will not be visible unless border-bottom-width and border-bottom-color (or the border-bottom/border shorthand) are also specified.

Info

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

Initial Valuenone
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS1
DOM Syntaxobject.style.borderBottomStyle = "dotted";

Syntax

Syntax of CSS border-bottom-style Property

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

Example of the border-bottom-style property:

Example of CSS border-bottom-style Property with solid and dashed values

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

CSS border-bottom-style Property

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

Example of CSS border-bottom-style Property with double, dashed and groove 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

ValueDescriptionPlay it
noneWill show no border. Default value.Play it »
hiddenThe same as "none", except in border conflict resolution for table elements.Play it »
dottedThe border is specified as a series of dots.Play it »
dashedThe border is specified as a series of dashes.Play it »
solidThe border is specified as a solid line.Play it »
doubleThe border is specified as two solid lines.Play it »
grooveIt’s a 3D grooved border and gives the impression that the border is carved. Opposite of ridge.Play it »
ridgeSpecifies a 3D ridged border and gives the impression of extruded appearance. Opposite of groove.Play it »
insetIt’s a 3D effect that makes the impression that the element appears embedded. Opposite of outset.Play it »
outsetIt’s a 3D effect that makes the impression that the element appears embossed. Opposite of inset.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

Which of the following are valid values for the border-bottom-style property in CSS?