CSS border-bottom Property

The CSS border-bottom property is a shorthand property for:

Note: If you do not specify the border-bottom-color, the color applied will be the color of the text.

Syntax:

border-bottom: border-width border-style border-color;

border-bottom-width – defines the width of the bottom border.

border-bottom-style – defines the style of the bottom border.

border-bottom-color – defines the color of the bottom border.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-bottom: 5px dotted red;
}

p {
  border-bottom: 4px dashed blue;
}

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

<h4>A heading with a dotted red bottom border.</h4>   
<p>A paragraph with a dashed blue bottom border.</p>
<div>A div element with a solid bottom border.</div>

</body>
</html>

Output:

A heading with a dotted red bottom border.

A paragraph with a dashed blue bottom border.

A div element with a solid bottom border.

Enjoy coding!

A heading with a dotted red bottom border.

Share this: