HTML horizontal line thickness
Introduction
This tutorial will show you the solution for HTML horizontal line thickness. Before you increase the width of the horizontal lines, learn how to create a horizontal line. We need to use the HTML <hr> tag to create a horizontal line.
Step-by-Step Guide On Horizontal Line Thickness:
We use the height attribute of the <hr> tag to increase the thickness of the horizontal line. The default value of height attribute of <hr> tag is 1px.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal line width</title>
</head>
<body>
<!--hr with 2px height-->
<hr style="height:2px;background-color:black">
<!--hr with 6px height-->
<hr style="height:6px;background-color:black">
<!--hr with 12px height-->
<hr style="height:12px;background-color:black">
<!--hr with 18px height-->
<hr style="height:18px;background-color:black">
<!--hr with 32px height-->
<hr style="height:32px;background-color:black">
</body>
</html>Output:
- First, we write an HTML basic syntax.
- In the body, we create many horizontal lines using <hr> tag and use background-color and height property in style for everything. In the first one, we set the height (thickness) of a line is 2px, then we give each a different height value.
- At last, the <body> and <html> tags are closed with </body> and </html>.
Conclusion
In this article, we have seen how to assess the thickness of horizontal lines. If we set background-color to the <hr> tag then the horizontal line display is done. I hope this article on horizontal line thickness helps you.
