Quadratisches Hintergrundbild, Eckenradius und Transparenz

Ich finde es schwierig, den Effekt zu beschreiben, den ich mit Worten haben möchte, also habe ich es in Photoshop erstellt und Sie können das Bild unten sehen:

Wie Sie sehen können, habe ich ein rotes Quadrat mit einer 38-Pixel-Grenze. Die Grenze ist draußen und ihr Stil ist darauf eingestellt, den Burst zu formen. Aber ich denke leider nicht, dass ein ähnlicher Stil in CSS ist. Die Rahmenfarbe wird dann auf einen linearen Farbverlauf eingestellt, wobei die Farbe innen das gleiche Rot wie das Quadrat und die äußere Farbe auf transparentes Weiß eingestellt ist. Achte nicht auf das Grün, das die untere Ebene ist, nur um die Transparenz der Grenze zu zeigen.

Was ich gerne wissen würde, ist, ob es irgendeine Möglichkeit gibt, diesen Effekt mit CSS oder jQueryUI zu erreichen.

Ich habe eine Weile in DIESEM JSFIDDLE versucht, aber ich weiß nicht, wie ich es besser machen könnte Quadrat.

Hier ist der Code in der Geige über