How to add left, right, bottom & top border in HTML CSS

You can add borders to a parts of a webpage in two ways:

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

The border is a line that occurs between the padding and margin in HTML and CSS.

Using CSS border property.

The easiest way to create a border is by using the CSS border property. The structure of the border property is:

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

Example:

.red-box{
	border: solid 2px red;
}
<div class="red-box">
	<p>I have a red border around me</p>
</div>

result:

Using CSS border-style, border-width, and border-color properties.

An alternative method of adding borders to elements on a webpage is by using CSS border-style, border-width, and border-color properties.

.blue-box{
	border-style: dashed;
	border-width:5em;
	border-color:#0000ff;
}
<div class="blue-box">
	<p>I have a red border around me</p>
</div>

Result:

For this second method, you have to set the border-style property otherwise, borders will not appear on your webpage.

Add Bottom Border in HTML and CSS

The bottom border is usually used for underlining links or showing the active page on a navigation bar. There are two ways of setting the bottom border in CSS:

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

1. Using border-bottom

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

Example:

.border-link{
	border-bottom: solid 2px #ff0000;
}
<a href="#" class="border-link">
	I have a red border around me
</a>

I have a red bottom border under me

2. Using Border Width, Style and Color

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

Example:

.border-link{
	border-style: dotted;
	border-color: #00ff00;
	border-width: 0 0 4px 0;
}
<a href="#" class="border-link">
	I have a red bottom border under me
</a>

I have a green dotted bottom border under me

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.

Create Right Border

You can create the right border in CSS:

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

1. Create right border using border-bottom

You can use the border-right CSS property to create the right border on text on different parts of a HTML web page.

Example:

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

I have a red right border.

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

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

Example:

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

I have a green right double-line border.

Add Top Border HTML & CSS

There are two ways of setting the top border in CSS:

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

1. Using border-top

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

Example:

.border-link{
	border-top: solid 2px #ff0000;
}
<a href="#" class="border-link">
	I have a red border around me
</a>

I have a red top border under me

2. Using Border Width, Style and Color

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

Example:

.border-link{
	border-style: dotted;
	border-color: #00ff00;
	border-width: 0 0 4px 0;
}
<a href="#" class="border-link">
	I have a red top border under me
</a>

I have a green dotted top border under me

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.