To create horizontal lines on the html page is used to <hr> horizontal rules tag.
This tag supports all major browsers (IE, Chrome, Firefox, Opera, Safari, Android, Mozilla...)
Horizontal line in html:
<hr>
result:




Simple example <hr> tag with CSS

hr {
width:75%;
height:14px;
background-color: yellow;
border:4px ridge red;
border-radius:8px;
}



result:


CSS stylization: Attribute "width" sets length of the horizontal line

(in percentage or pixels)

<hr width="50%">

result:


<hr width="70%">
result:


<hr width="90%">
result:




CSS stylization: Attribute "size" set thickness of the horizontal line

<hr size="4">
result:


<hr size="8">
result:


<hr size="12">
result:



Attribute "align" sets the alignment of horizontal lines in the position of these values: "left", "right" and "center"

<hr align="left">

result:


<hr align="center">
result:


<hr align="right">
result:



Attribute "color" set color of the horizontal line

<hr color="#5E1CA5">
result:


<hr color="#F71CE2">
result:


<hr color="#44E91E">
result:




CSS stylization: Attribute "border" set border style on the horizontal line

<hr style=" height:15px;width:90%; border:6px solid red;">
result:


<hr style=" height:15px; width:90%; border:5px solid blue; border-radius:12px;">
result:


<hr style="height:15px; width:90%; border:4px dotted green;">
result:


<hr style="width:90%; height:15px; color:#0451BC;border:6px ridge gray">
result:



JSFiddle



CSS stylization: Fixed Position Background Image On Horizontal Line

image:progress.jpg
image:green.png
image:red.png

<hr style="height:40px; width:90%;background: url(images/green.png); border:3px solid yellow;">
result:


<hr style="height:20px; width:90%; background: #aaa url(images/progress.jpg);border:5px solid;">
result:


<hr style="height:35px;width:90%;background: #aaa url(images/red.png);border:2px solid gray;">
result:


<hr style="height:20px; width:90%; background:#700DCD url(images/green.png); background-repeat: no-repeat; background-position: right;">
result:





More Examples with The Horizontal Line

<hr style="width:85%; border-top:9px double red;">

result:


<hr style="background-color: yellow; border-top: 9px dashed blue;">
result:


<hr style="background-color: black; border-top: 9px dotted #8c8b8b;">
result:


<hr style="border-top: 9px solid blue; border-bottom: 9px solid red;">
result:



JSFiddle

<hr style="width:85% ;height: 10px; border: 0; box-shadow: 0 10px 10px -10px red inset;">
result:


<hr style=" width:85%; height: 10px; border: 0; box-shadow: 0 10px 10px -10px blue inset;">
result:


<hr style="height: 20px; background-image: -webkit-linear-gradient(left, #8A2BE2, #FFD700, #006400);">
result:



JSFiddle



Absolutely positioning of horizontal lines in the div element


<html>
 <head>
  <style>
    #black {
position:relative;
border-width:6px;
border-color:black; 
border-style:ridge;
height:350px;
background-color:white;
color:white;
}
.a {
position:absolute;
height:20px;
width:50%; 
margin-top:25px;
margin-left:15%;
background:#700DCD;
}
.b {
position:absolute;
height:13px;
width:100%; 
margin-top:55px;
background-color:blue;
font-size:11px;
}
.c{
position:absolute;
margin-top:115px;
margin-left:35%;
width:65%;
height:40px;
background-color:gray;
}
.d {
position:absolute;
margin-top:135px;
width:75%;
height:15px;
background-color:red;
}
.e {
position:absolute;
margin-top:195px;
margin-left:25%;
width:30%;
height:30px;
background-color:black;
}
.f{
position:absolute;
margin-top:278px;
width:50%;
height:17px;
background-color:green;
}
.g{
position:absolute;
margin-top:275px;
margin-left:50%;
width:50%;
height:20px;
background-color:#FA6109;
}
  </style>
 </head>
 <body>
   <div id="black">
     <hr class="a">
     <hr class="b">
     <hr class="c">
     <hr class="d">
     <hr class="e">
     <hr class="f">
     <hr class="g">
  </div>
 </body>
</html>

result:

<hr class="a">
<hr class="b">
<hr class="c">
<hr class="d">
<hr class="e">
<hr class="f">
<hr class="g">


Learn HTML Code: horizontal rule (YouTube)


Privacy Policy