RP Resources

tessisamess's amazing gradient text tutorial put it into my head that there might be a way to apply gradients to borders as well. And I was right!

<div style="border: 5px solid transparent; border-image:-moz-linear-gradient(left, #ff0000 0%, #ff6600 20%, #ffff00 40%, #00ff00 60%, #3366ff 80%, #990099 100%) 1 stretch; border-image:-webkit-linear-gradient(left, #ff0000 0%, #ff6600 20%, #ffff00 40%, #00ff00 60%, #3366ff 80%, #990099 100%) 1 stretch; border-image: linear-gradient(to right, #ff0000 0%, #ff6600 20%, #ffff00 40%, #00ff00 60%, #3366ff 80%, #990099 100%) 1 stretch;"> DIVCONTENTGOESHERE </div>

You can also do it with radial gradients to get a different look:

<div style="border: 5px solid transparent; border-image: -moz-radial-gradient(center, ellipse cover, #cc7700 0%, #ffff00 50%, #cc7700 100%) 1 stretch; border-image: -webkit-radial-gradient(center, ellipse cover, #cc7700 0%, #ffff00 50%, #cc7700 100%) 1 stretch; border-image: radial-gradient(ellipse at center, #cc7700 0%, #ffff00 50%, #cc7700 100%) 1 stretch;"> DIVCONTENTGOESHERE </div>

Or repeating ones:

<div style="border: 5px solid transparent; border-image:-moz-repeating-linear-gradient(135deg, #006600 0%, #00ffff 7%, #006600 15%) 1 stretch; border-image:-webkit-repeating-linear-gradient(135deg, #006600 0%, #00ffff 7%, #006600 15%) 1 stretch; border-image: repeating-linear-gradient(135deg, #006600 0%, #00ffff 2%, #006600 4%) 1 stretch;"> DIVCONTENTGOESHERE </div>

You can vary the width of the border, like so! Unfortunately you cannot also:

use border styles like dotted or double
round the corners using border-radius

...at least you can, but it won't work.

Update: You can however use outline, which takes some of the same styles as border, to get some similar effects!

<div style="border: 8px solid transparent; border-image: -moz-linear-gradient(top, #808 0%, #f09 100%) 1 stretch; border-image: -webkit-linear-gradient(top, #808 0%, #f09 100%) 1 stretch; border-image: linear-gradient(top, #808 0%, #f09 100%) 1 stretch; outline: 2px solid white; outline-offset: -5px;"> DIVCONTENTGOESHERE </div>