CSS 3 Colored Borders Style

How to set colored borders style using CSS 3 ?

W3C has offered some new options for borders in CSS3, of which, next to rounded borders, border-color is also very interesting.

Mozila/Firefox has implemented this function, which allows you to create cool colored borders.

This is an example:

Mozilla/Firefox users should see a nice grey fading border on this box…

The CSS code for this is:

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;

And of course, you can also do cool color stuff:

Mozilla/Firefox users should see a nicely fading red border on this box…