I recently had to reproduce a fancy “kinda separator” and I gave it a try in pure css. The result is quite cool. It works like a charm in ie9, Chrome, Safari, Opera and Firefox.
If you’re using Firefox you’ll notice (or not) that the dashed rounded border is “solid” rather than being “dashed” (inside the white circle)… Well there’s a bug about it in Firefox opened since 2007… dashed border simply doesn’t work when a border-radius is applied to it. Too bad… Well the guys at Webkit’s have the solution, wonder why Firefox didn’t implemented it jet.
Anyway the :after shadow border works great every where I tested it so it’s a quite robust ie9+ technique. I need to apply a degraded version for ie8, maybe just a simple grey border.
Here’s the Codepen version. You can play with the tabs to see how it works underhood.
See the Pen Shadow separator by Julien Knebel (@jkneb) on CodePen.