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

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

Browser support
1.0+ 12.0+ 1.0+ 1.0+ 9.2+

Practice Your Knowledge

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


Prev
Next

Do you find this helpful?

Related articles