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>

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>

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.


Prev
Next

Related articles