Dev Practical

How to make borders in HTML and 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:

I have a red border around me

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:

I have a blue border around me

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