Stijl 1

Select & Copy 
<hr class="1hr"> <style style="display: none;"> margin: 20px 35px 20px 0px; border: 0; border-top: 2px dotted #e4deca; border-bottom: 1px dotted #c3c3c3; -webkit-box-shadow: 0px 0px 2px 1px #bbb; </style>

Stijl 2

Select & Copy
<hr class="stijl2"> <style style="display: none;"> hr.stijl2 { border: 0;height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }</style>

Stijl 3

Select & Copy
<hr class="stijl3"> <style style="display: none;">/* Double-color dashed line */ hr.stijl3 { border: 0; border-bottom: 1px dashed #ccc; background: #999; }</style>

Stijl 4

Select & Copy
<hr class="stijl4"> <style style="display: none;">/* Single-direction drop shadow */ hr.stijl4 { height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); }</style>

Stijl 5

Select & Copy
<hr class="stijl5"> <style style="display: none;">/* Cloud */ hr.stijl5 { border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px black; } hr.stijl5:after { /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ }</style>

Stijl 6

Select & Copy 
<hr class="stijl6"> <style style="display: none;">/* Inset, by Dan Eden */ hr.stijl6 { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }</style>

Stijl 7

Select & Copy
<hr class="stijl7"> <style style="display: none;">/* Flaired edges, by Tomas Theunissen */ hr.stijl7 { overflow: visible; /* For IE */ height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr.stijl7:before { /* Not really supposed to work, but does */ display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }</style>

Stijl 8

Select & Copy
<hr class="stylestijl8"> <style style="display: none;">/* www.tooljunkie.eu */ hr.stylestijl8 { overflow: visible; /* For IE */ padding: 0; border: none; border-top: medium double #333; color: #333; text-align: center; } hr.stylestijl8:after { content: "☺"; display: inline-block; position: relative; top: -0.7em; font-size: 1.5em; padding: 0 0.25em; background: white; }</style>

Stijl 9

Select & Copy
<hr class="stijl9"><br> <style> hr.stijl9 { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); }</style>