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:
hr {
width:75%;
height:14px;
background-color: yellow;
border:4px ridge red;
border-radius:8px;
}
<hr width="50%">
result:
<hr width="70%">
result:
<hr width="90%">
result:
<hr size="4">
result:
<hr size="8">
result:
<hr size="12">
result:
<hr align="left">
result:
<hr align="center">
result:
<hr align="right">
result:
<hr color="#5E1CA5">
result:
<hr color="#F71CE2">
result:
<hr color="#44E91E">
result:
<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:
<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:
<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:
<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:
<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: