How to Add Border in HTML CSS
In this article, we will see how to add border in HTML using CSS property.
What is border
It is a content surrounded line and the “border” property is used to create a border. We can give three values in border property one is border size, two is border color and three is border type. You can give however you want but you must give. You can give border size as px but you cannot give a percentage(%) value. There are many types of border types.
Border types: dotted | dashed | solid | double | groove | ridge | outside | inside.
Border size : 2px
Broder color: black | rgb() | hex
We can give border type as in the above code only, the size must give only px value and we can give color as color name or RGB or hex code.
How to create a border
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
width: 50%;
}
.p1{
border: 2px solid black;
}
.p2{
border: 2px solid rgb(230, 5, 5);
}
.p3{
border: 2px solid #003ee6;
}
.p4{
border: dotted;
}
</style>
</head>
<body>
<p class="p1"> Paragraph Text 1</p>
<p class="p2">Paragraph Text 2</p>
<p class="p3">Paragraph Text 3</p>
<p class="p4">Paragraph Text 4</p>
</body>
</html>Output:
Steps
In the above code, first wrote a general syntax of an HTML. We have 4 paragraph text in the body. Each <p> tags have a separate class attribute with a different class name i.e p1, p2, p3, and p4. The first paragraph has a border size of 2px, border type solid and border color black. The second paragraph has a border as the same first paragraph but we use the RGB() border-color value. The third paragraph has a hex code border-color value for blue color. And in the final paragraph, we have given only the dotted border type no specific size or color.
See the given output, The border has been displayed for the final paragraph, because the default color black and default size 2px will be assigned automatically
