How to make borders in HTML and CSS
You can add borders to a parts of a webpage in two ways:
- Using CSS border property.
- 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.