CSS3 Border Multi-color Border-color Property Use Example

Border-color is designed for the border of the multi-color and preparation of properties, next for you to introduce the CSS3 border multi-color border-color use, like friends do not miss CSS3 border multi-color border-color is designed for the border of multi-color and prepared properties. There is also a border color in CSS2, but what's amazing about the border color properties in CSS3? The following is to introduce you to CSS3 border Multi-color Border-color bar.

first, the grammar of Border-color

The code is as follows:

Element Selector {
-moz-border-top-colors:color color color; /* Top Border */
-moz-border-right-colors:color color color; /* Right Border */
-moz-border-bottom-colors:color color color; /* Bottom Border */
-moz-border-left-colors:color color color; /* Left Border */
}

second, the compatibility of Border-color



iii. Examples of Border-color
CSS code:

The code is as follows:

p {width:100px;height:50px;border:10px solid transparent;margin:20px;
/* Top Border */
-moz-border-top-colors: #bfe6f8 #b0e3fa #9fdefa #89d6f9 #73cff9 #5dcafc #3ac1fe #20b7fb #05b1ff;
/* Bottom Border */
-moz-border-bottom-colors: #ded7fc #c9bdfd #b7a6fe #a18bfc #8c72fb #7657fe #633ffe #4e25fe #3c0ffd;
/* Right Border */
-moz-border-right-colors: #dbfdd5 #c4feba #adfe9f #96fe84 #89ff76 #72fa5b #57fd3c #43fe24 #25fd01;
/* Left Border */
-moz-border-left-colors: #ffc9c9 #ffb0b0 #ff9696 #fd7f7f #fd6969 #fd5050 #fd3838 #fd1b1b #fe0101;
}

HTML code:

The code is as follows:

<p> Dream Dragon Station </p>

Preview Effect: