• Post category:HTML

Step-by-Step Guide On HTML Horizontal Line Thickness

HTML horizontal line thickness


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>
<title>Horizontal line width</title>

<!--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">


Output:html horizontal line thickness

  1. First, we write an HTML basic syntax.
  2. 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.
  3. At last, the <body> and <html> tags are closed with </body> and </html>.


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.

Leave a Reply