Gradient Borders
(With transparent background and border radius)
There are many ways to create gradient borders for an element.
If you looked it up, you probably found Chris Coyier's great article about
Gradient Borders in CSS,
where he describes how to create gradient borders with pseudo-element
and border-image.
The problem is that one method only supports opaque backgrounds,
and the other is incompatible with border-radius. So what do you
do when you need an element with gradient borders, and rounded corners, and a transparent
background?! You can use background-image for that.
It uses a very similar method as the one I've used in my Dashed Border Generator, only with 8 background areas instead of 4, which allows for the rounded-corners effect.