Solution 1. Using absolutely positioned generated content in :before and :after pseudoelements with CSS gradients as background
This method perfectly works in Safari, Opera, IE, Chrome, and Firefox. But you might want to use SVG or regular single-color borders as a fallback.
Here is html code:
Solution 1: using hr tag with gradient background (+ alpha transparency)
Fading gradient line with rgba transparency uses browser prefixes, which makes it reliable for most major browsers.
You can make all of your hr tags gradient or create a class, that will apply styles to certain horizontal rules.