Another way to achieve this effect:<p><pre><code> hr {
background-image:
linear-gradient(left,rgba(195,195,195,0),rgba(195,195,195,1),rgba(195,195,195,0)),
linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0));
background-position:0 0,0 1px;
background-repeat:no-repeat;
background-size:100% 1px,100% 3px;
border:0;
height:4px;
}
</code></pre>
Fallback is non-existent for browsers that don't support linear gradients, but it has the advantage of automatically working with any background color.<p>Not a criticism of the original solution - just offering an alternative approach to the problem.