gradient borders

do not copy code using translator

TUTORIAL

Advanced Gradient Borders

Go To Standard Version

This version allows you to set a different gradient for each side of the border

The css classes

Extra styles can be added to the "common properties" and gb_0 classes

/*Start gradient border*/
/*Common properties*/
.gb_15, .gb_14, .gb_13, .gb_12, .gb_11, .gb_10, .gb_9, .gb_8, .gb_7, .gb_6, .gb_5, .gb_4, .gb_3, .gb_2, .gb_1, .gb_0 
{border-width:1px;border-style:solid;}
/*Border colors*/
.gb_15 {border-color: rgb(171,205,239) rgb(101,67,33) rgb(101,79,237) rgb(171,193,35)}
.gb_14 {border-color: rgb(160,194,228) rgb(111,77,43) rgb(107,84,223) rgb(164,187,48)}
.gb_13 {border-color: rgb(150,184,218) rgb(121,87,53) rgb(114,90,209) rgb(157,181,62)}
.gb_12 {border-color: rgb(140,174,208) rgb(131,97,63) rgb(121,95,196) rgb(150,176,75)}
.gb_11 {border-color: rgb(130,164,198) rgb(141,107,73) rgb(128,101,182) rgb(143,170,89)}
.gb_10 {border-color: rgb(120,154,188) rgb(152,118,84) rgb(135,107,169) rgb(137,165,103)}
.gb_9 {border-color: rgb(109,143,177) rgb(162,128,94) rgb(141,112,155) rgb(130,159,116)}
.gb_8 {border-color: rgb(99,133,167) rgb(172,138,104) rgb(148,118,141) rgb(123,153,130)}
.gb_7 {border-color: rgb(89,123,157) rgb(182,148,114) rgb(155,123,128) rgb(116,148,143)}
.gb_6 {border-color: rgb(79,113,147) rgb(192,158,124) rgb(162,129,114) rgb(109,142,157)}
.gb_5 {border-color: rgb(69,103,137) rgb(203,169,135) rgb(169,135,101) rgb(103,137,171)}
.gb_4 {border-color: rgb(58,92,126) rgb(213,179,145) rgb(175,140,87) rgb(96,131,184)}
.gb_3 {border-color: rgb(48,82,116) rgb(223,189,155) rgb(182,146,73) rgb(89,125,198)}
.gb_2 {border-color: rgb(38,72,106) rgb(233,199,165) rgb(189,151,60) rgb(82,120,211)}
.gb_1 {border-color: rgb(28,62,96) rgb(243,209,175) rgb(196,157,46) rgb(75,114,225)}
.gb_0 {border-color: rgb(18,52,86) rgb(254,220,186) rgb(203,163,33) rgb(69,109,239)}
/*End gradient border*/

The html code

html for reflected border

Main Page