радиус границы + градиент + тень блока, вызывающая рваные края

Я вижу это в Chrome и FF. Если я удалю градиент ИЛИ радиус границы, проблема исчезнет.

Есть идеи, почему это происходит и как это исправить?

ОБНОВЛЕНИЕ: Я работаю над решением jQuery, основанным на идее Джоша Ф. (см. его полный ответ ниже). Это простая функция jQuery, которая добавляет за собой дубликат элемента. На данный момент скрипты устанавливают позиционирование целевого элемента на относительный. (В некоторых случаях я видел, что это проблематично.) Мой код находится здесь на jsfiddle .