Come creare un bordo multicolore in css3

Come creare un bordo multicolore in css3 come l’immagine qui sotto?

inserisci la descrizione dell'immagine qui

Puoi farlo con :after o :before psuedo element e css linear-gradient come mostrato di seguito:

 body { background: #ccc; } .box { text-align: center; position: relative; line-height: 100px; background: #fff; height: 100px; width: 300px; } .box:after { background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); position: absolute; content: ''; height: 4px; right: 0; left: 0; top: 0; } 
 
Div

Puoi farlo senza pseudo-elements , solo con border-image: linear-gradient

 .fancy-border { width: 150px; height: 150px; text-align:center; border-top: 5px solid; border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5; } 
 
my content

Provalo.

 
.test { width: 500px; height: 100px; background-color: #ccc; position: relative; } .test:before, .test:after { content: ""; position: absolute; left: 0px; right: 0px; height: 10px; background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px); background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px); background-size: 80px; } .test:before { top: 0px; } .test:after { bottom: 0px; }

Guarda la demo

http://jsfiddle.net/yH59y/