border-bottom-style Archives

Demo:

The CSS border-bottom-style property settles the style of an element’s bottom border.

Syntax:

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

none (default) – defines no border.

hidden – a border is not visible.

dotted – defines a dotted border.

dashed – defines a dashed border.

solid – defines a solid border.

double – defines a double border.

groove – defines a 3D grooved border.

ridge – defines a 3D ridged border.

inset – defines a 3D inset border.

outset – defines a 3D outset border.

Example1:

A dotted bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom-style: dotted;
}

p {
  border-style: solid;
  border-bottom-style: dotted;
}
</style>
</head>
<body>

<div>A div element with a dotted bottom border</div>

<p>A paragraph with a dotted bottom border.</p>

</body>
</html>

Output:

A div element with a dottoed bottom border

A paragraph with a dotted bottom border.

Example2:

A double bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom-style: double;
}

p {
  border-style: solid;
  border-bottom-style: double;
}
</style>
</head>
<body>

<div>A div element with a double bottom border</div>

<p>A paragraph with a double bottom border.</p>

</body>
</html>

Output:

A div element with a double bottom border

A paragraph with a double bottom border.

Enjoy coding!