HR styling with linear gradients

by archatas

HTML

<p>Lorem impsum</p>
<hr />
<p>Lorem impsum</p>

CSS

hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px;
    
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.75), transparent);
    background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.75), transparent);
    background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.75), transparent);
    background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.75), transparent);
}