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.

Create your own gradient border


Output code: