CSS border-bottom-style Property

CSS border-bottom-style

The border-bottom-style property in CSS specifies the style of the bottom border of an element. This property provides options to set various styles, such as solid, dotted, dashed, and more, to enhance the appearance of the element’s bottom border.

Syntax of border-bottom-style

</>

Copy

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

Values

Value	Description
`none`	No border is displayed.
`hidden`	Similar to `none`, but resolves border conflicts in table elements.
`dotted`	A dotted border is displayed.
`dashed`	A dashed border is displayed.
`solid`	A single solid border is displayed.
`double`	Two solid lines are displayed as the border.
`groove`	A border that appears carved into the page (opposite of `ridge`).
`ridge`	A border that appears raised from the page (opposite of `groove`).
`inset`	A border that makes the element appear embedded.
`outset`	A border that makes the element appear coming out of the page.
`initial`	Sets the property to its default value (`none`).
`inherit`	Inherits the value from its parent element.

Default Value

none

Examples for border-bottom-style

Using the CSS border-bottom-style Property

The following examples demonstrate how to use the border-bottom-style property with different values to style the bottom border of an element.

</>

Copy

/* Set the bottom border to solid */
.element {
  border-bottom-style: solid;
}

/* Set the bottom border to dashed */
.element {
  border-bottom-style: dashed;
}

/* Set the bottom border to double */
.element {
  border-bottom-style: double;
}

/* Inherit the bottom border style from the parent */
.element {
  border-bottom-style: inherit;
}

Example for a Dashed Bottom Border

Below is an example demonstrating how to use border-bottom-style: dashed to apply a dashed border to the bottom of an element:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .decorated {
    border-bottom-width: 4px;
    border-bottom-style: dashed;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="decorated">Dashed Bottom Border</h1>

</body>
</html>

Example for a Solid Bottom Border

border-bottom-style: solid;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .decorated {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="decorated">Solid Bottom Border</h1>

</body>
</html>

Example for a Dotted Bottom Border

border-bottom-style: dotted;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .decorated {
    border-bottom-width: 4px;
    border-bottom-style: dotted;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="decorated">Dotted Bottom Border</h1>

</body>
</html>

Example for a Double Bottom Border

border-bottom-style: double;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .decorated {
    border-bottom-style: double;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="decorated">Double Bottom Border</h1>

</body>
</html>

Browser Support

The border-bottom-style property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	1.0
Edge	5.5
Firefox	1.0
Safari	1.0
Opera	9.2

TutorialKart

CSS border-bottom-style Property