Another way to achieve this effect:

  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;
  }

Fallback is non-existent for browsers that don't support linear gradients, but it has the advantage of automatically working with any background color.

Not a criticism of the original solution - just offering an alternative approach to the problem.