CSS - border-bottom-style Property

Quiz

CSS border-bottom-style property sets the style of the bottom border of an element.

Syntax

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

Property Values

Value	Description
none	It specifies no border. Default value.
hidden	It is similar to none, except in border conflict resolution for table elements.
dotted	It specifies a dotted border.
dashed	It specifies a dashed border.
solid	It specifies a solid border.
double	It specifies a double border.
groove	It specifies a 3D grooved border. Effect depends on the border-color value.
ridge	It specifies a 3D ridged border. Effect depends on the border-color value.
inset	It specifies a 3D inset border. Effect depends on the border-color value.
outset	It specifies a 3D outset border. Effect depends on the border-color value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Bottom Style Property

The following examples explain the border-bottom-style property with different values.

Border Bottom Style without Border

To not have any border at the border bottom, we use the none value. In the following example, none value has been used.

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: none;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style without bottom border
   </h3>
   <p>
      Border Bottom Style without bottom border
   </p>
</body>

</html>

Hidden Border Block Style

To set a hidden border bottom, we use the hidden value. This makes the border occupy space but remain invisible. The following example below shows this effect.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         padding: 10px;
         border: 5px solid;
      }

      .none {
         border-bottom-style: none;
         background-color: lightgray;
      }

      .transparent {
         border-bottom-style: solid;
         border-bottom-color: transparent;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style Property
   </h2>
   <p>
      Border Bottom Style with none value
   </p>
   <div class="box none">
      Border Bottom Style: none
   </div>
   <p>
      Border Bottom Style with transparent value
   </p>
   <div class="box transparent">
      Border Bottom Style: 
      transparent
   </div>
</body>

</html>

Dotted Border Block Style

To have a dotted border bottom, we use the dotted value. In the following example, dotted value has been used with the border-bottom-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: dotted;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with dotted border
   </h3>
   <p>
      Border Bottom Style with dotted border
   </p>
</body>

</html>

Dashed Border Block Style

To have a dashed border bottom, we use the dashed value. In the following example, dashed value has been used with the border-bottom-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: dashed;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: dashed;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with dashed border
   </h3>
   <p>
      Border Bottom Style with dashed border
   </p>
</body>

</html>

Solid Border Block Style

To have a solid border bottom, we use the solid value. In the following example, solid value has been used with the border-bottom-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: solid;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with solid border
   </h3>
   <p>
      Border Bottom Style with solid border
   </p>
</body>

</html>

Double Border Block Style

To have a double border bottom, we use the double value. In the following example, double value has been used with the border-bottom-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: double;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: double;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with double border
   </h3>
   <p>
      Border Bottom Style with double border
   </p>
</body>

</html>

Groove Border Block Style

To have a 3D grooved border bottom, we use the groove value. This effect depends on the border-color. In the following example, groove value has been used with the border-bottom-style property with red border color.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: groove;
      }

      h3 {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: groove;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with groove border
   </h3>
   <p>
      Border Bottom Style with groove border
   </p>
</body>

</html>

Ridge Border Block Style

To have a 3D ridged border bottom, we use the ridge value. This effect depends on the border-color. In the following example, ridge value has been used with the border-bottom-style property with yellow border color.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: ridge;
      }

      h3 {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: ridge;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with ridge border
   </h3>
   <p>
      Border Bottom Style with ridge border
   </p>
</body>

</html>

Inset Border Block Style

To have a 3D inset border bottom, we use the inset value. This effect depends on the border-color. In the following example, inset value has been used with the border-bottom-style property with orange border color.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: inset;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: inset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with inset border
   </h3>
   <p>
      Border Bottom Style with inset border
   </p>
</body>

</html>

Outset Border Block Style

To have a 3D outset border bottom, we use the outset value. This effect depends on the border-color. In the following example, outset value has been used with the border-bottom-style property with green border color.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: outset;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: outset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with outset border
   </h3>
   <p>
      Border Bottom Style with outset border
   </p>
</body>

</html>

Supported Browsers

Property
border-bottom-style	1.0	5.5	1.0	1.0	9.2

css_reference.htm

Print Page