✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

HTML Horizontal Line Color

Last Updated : Jul 1, 2023

IN - HTML | Written & Updated By - Dikshita

HTML Horizontal Line Color

In this tutorial we will show you the solution of HTML horizontal line color and how we are able to color a horizontal line in html. In our previous session we show you that how you can add a horizontal line in html.

And in that session, we show you two ways, one with the help of hr tag and other with border bottom. Now, in this article we will discuss about color of html line with the help of hr tag.

Step By Step Guide On HTML Horizontal Line Color :-

As we know, HTML horizontal line tag is used to insert a horizontal line within a webpage. It is a singular tag and have no closing tag. All the customization and done in this tag.

Mainly, the width of hr i.e. horizontal line is 1px. And we can change its thickness, style and color according to our choice. Let us understand how we are able to change color. 

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
<p>A normal horizontal line is given below:</p>
<hr>
<p>With help of CSS in which we use different colors:</p>
<hr style="height:2px;border-width:0;background-color:red">
<!--hr with red color-->
<hr style="height:2px;border-width:0;background-color:green">
<!--hr with green color-->
<hr style="height:2px;border-width:0;background-color:tan">
<!--hr with tan color-->
<hr style="height:2px;border-width:0;background-color:yellow">
<!--hr with yellow color-->
<hr style="height:2px;border-width:0;background-color:blue">
<!--hr with blue color-->
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
  4. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  6. Here, in body we create different hr tags for horizontal lines. In first one, that is a simple hr tag no any additional attribute and css used here. So, it is default view of horizontal line.
  7. After this next other lines are same, in all we use hr tag and under hr we use style attribute. In style, first we use height property to increase the height of line to see what color in going to show on that horizontal line.
  8. And after this we use border-width with value zero, to make a disappeared border. Now, the main thing is here that is of color.
  9. Here, we use background-color property with some values. All the values are different here because we want to show you that we can apply any color to this line with we want.
  10. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last here in conclusion, we can say that with the help of this article we are able to create a horizontal line as well as able to apply different color of horizontal line. I hope this tutorial on HTML horizontal line color helps you.