CSS border-left Property

The CSS border-left property is a shorthand property for the following properties:

Syntax:

border-left: border-width border-style border-color;

border-left-width – settles the width of an element’s left border.

border-left-style – settles the style of an element’s left border.

border-left-color – settles the color of an element’s left border.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-left: 7px solid #333;
}

p {
  border-left: 5px dotted #e76f51;
}

div {
  border-left: double;
}
</style>
</head>
<body>

<h4>A heading with a solid #333 left border</h4>

<p>A paragraph with a dotted #e76f51 left border</p>

<div>A div element with a double left border.</div>

</body>
</html>

Output:

A heading with a solid #333 left border

A paragraph with a dotted #e76f51 left border

A div element with a double left border.

Enjoy coding!

A heading with a solid #333 left border

Share this: