CSS3 Gradient Borders

Question

I'm trying to apply a gradient to a border, I thought it was as simple as doing this:

border-color: -moz-linear-gradient(top, #555555, #111111);

This does not work, does anyone know what the correct way to do border gradients is.

Thanks.

Answer 1

Here is a good write up on what you are trying to do, with examples.

http://designshack.co.uk/articles/introduction-to-css3-part-2-borders

Answer 2

Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background.

— https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px; 

— http://www.cssportal.com/css3-preview/borders.htm