<!DOCTYPE html>
<style>
body {
-webkit-writing-mode: vertical-rl;
}
.rule {
border-top-color: gray;
border-top-width: 12px;
width: 200px;
height: 0;
margin: 4px 0;
display: inline-block;
}
</style>
<div class="rule" style="border-top-style: solid;"></div>
<div class="rule" style="border-top-style: dotted;"></div>
<div class="rule" style="border-top-style: dashed;"></div>
<div class="rule" style="border-top-style: groove;"></div>
<div class="rule" style="border-top-style: ridge;"></div>
<div class="rule" style="border-top-style: ridge;"></div>
<div class="rule" style="border-top-style: groove;"></div>
<div class="rule" style="border-top-style: double;"></div>