HTML <hr> Styling Demo

The <hr> element represents a thematic break. Use CSS for thickness, color, width and alignment instead of obsolete HTML attributes.

Thicker rule

<hr class="hr-thick">

Colored rule

<hr class="hr-red">

50% width

<hr class="hr-half">

50% width aligned to the right

<hr class="hr-right">

CSS

.hr-thick { border: 0; border-top: 15px solid #6c757d; }
.hr-red   { border: 0; border-top: 4px solid red; }
.hr-half  { border: 0; border-top: 4px solid red; width: 50%; }
.hr-right { border: 0; border-top: 4px solid red; width: 50%; margin-left: auto; margin-right: 0; }