<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible"
content="ie=edge" />
<title>Document</title>
<style>
div {
width: 200px;
}
body {
background-color: #f0f0f0;
width: 80px;
float: center;
}
hr.class-1 {
border-top: 10px solid #8c8b8b;
}
hr.class-2 {
border-top: 3px double #8c8b8b;
}
hr.class-3 {
border-top: 1px dashed #8c8b8b;
}
hr.class-4 {
border-top: 1px dotted #8c8b8b;
}
hr.class-5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}
hr.class-6 {
background-color: #fff;
border-top: 5px dotted #8c8b8b;
}
</style>
</head>
<body>
<div>
<hr class="class-1" />
<br />
<hr class="class-2" />
<br />
<hr class="class-3" />
<br />
<hr class="class-4" />
<br />
<hr class="class-5" />
<br />
<hr class="class-6" />
</div>
</body>
</html>
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible"
content="ie=edge" />
<title>Document</title>
<style>
div {
width: 200px;
}
body {
background-color: #f0f0f0;
width: 80px;
float: center;
}
hr.class-1 {
border-top: 10px solid #8c8b8b;
}
hr.class-2 {
border-top: 3px double #8c8b8b;
}
hr.class-3 {
border-top: 1px dashed #8c8b8b;
}
hr.class-4 {
border-top: 1px dotted #8c8b8b;
}
hr.class-5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}
hr.class-6 {
background-color: #fff;
border-top: 5px dotted #8c8b8b;
}
</style>
</head>
<body>
<div>
<hr class="class-1" />
<br />
<hr class="class-2" />
<br />
<hr class="class-3" />
<br />
<hr class="class-4" />
<br />
<hr class="class-5" />
<br />
<hr class="class-6" />
</div>
</body>
</html>
-->