How to create colored borders with CSS3

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 ofcourse, you can also do cool color stuff:

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

Hosting by: