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 many great articles about Gradient Borders in CSS, describing how to create gradient borders with pseudo-element and border-image.

The problem is that many methods only support opaque backgrounds, and the others are incompatible with border-radius. So what do you do when you need an element with gradient borders, rounded corners, and a transparent background?! You can use background-image for that.

They use 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.