CSS3

• Home / CSS3 Previews / How to create colored borders with CSS3

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:

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: