Dev Practical

How to create left border in HTML and CSS

You can create the left border in CSS:

  1. Using border left property.
  2. Using border width, style and color properties.

1. Add left border using border-bottom

You can use the border-left to create the left border on text(heading, lists, paragraphs) or containers(div, section, nav, footer).

Example:

.left-border{
	border-left: solid 10px #ff0000;
}
<a href="#" class="left-border">
	I have a red left border.
</a>

I have a red left border.

2. Add left border using Border Width, Style and Color

You can also set the left border using the border-width, border-style and border-color properties.

Example:

.left-border{
	border-style: double;
	border-color: #00ff00;
	border-width: 0 10px 0 0;
}
<a href="#" class="left-border">
</a>

I have a green left double-line border.