Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
CSS3 Demos - border-colors
CSS3 border-colors gives a gradient to borders without the need for images. At the moment it's only supported by Firefox and requires the -moz- prefix.
Demo - black to grey
Code
HTML
- <article id="colour">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
</article>CSS
- article#colour{
border: 8px solid #555; /*must specify a solid colour for unsuported browsers*/
-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;
}
Support and prefixes
This technique only works in Firefox at the moment (as of June 2011) and requires the prefix
-moz-border-bottom-colors:
there are currently no prefixes for other browsers.
-moz-border-top-colors:
-moz-border-left-colors:
-moz-border-right-colors:
This is the effect in Firefox and Opera