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…