Dev Practical

How to create right border in HTML and CSS

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.