CSS3 gradient border

Some days ago my preferred graphic designer come out with a strange call to action button style.

It was a rounded corner rectangle with a nice purple gradient as background and the reverse gradient was used for the border.
It was something like this:

Call To Action button with gradient border

The effect is really impressive for visibility, but I had no idea how to make a gradient border in css3.

This time Fireworks helped me because with this nice program by Adobe you can draw a single rounded rectangle with gradient background and then a smaller one with reverse gradient inside the first one. Here’s a Fireworks PNG.

This concept is can be easily transposed in html+css by wrapping the call to action element in a container.
Then you only have to assign the container some pixel of padding and the job is done.
The code is really simple:

This is the result: a nice css3 gradient border


This code is compatible with ie7,8,9,ffox,chrome; on Microsoft’s browsers rounded corners are not showed. For me this is an acceptable ‘graceful degradation’.
There is a css3 property that let you set an image as a border: border-image, but at the moment is completely missing on ie.

Gradients are generated with Ultimate CSS Gradient Generator