How to create colored borders with CSS3

Discussion in 'CSS' started by heshanfu, Nov 11, 2011.

  1. heshanfu Administrator

    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:
    Code:
    Mozilla/Firefox users should see a nice grey fading border on this box…
    
    The CSS code for this is:

    Code:
    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:

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

Share This Page