<div class="box">Hola Mundo</div>
<a href="http://www.creandoweb.net/2017/12/como-crear-borde-multicolores-con-css.html">Creandoweb.net</a>
body {
background: #ccc;
text-align:center;
}
.box {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 200px;
width: 400px;
margin: 0px auto;
}
.box:after {
background: rgb(252,107,28); /* Old browsers */
background: -moz-linear-gradient(left, rgb(252,107,28) 0%, rgb(227,237,47) 2%, rgb(49,161,247) 4%, rgb(190,249,52) 6%, rgb(49,138,247) 8%, rgb(49,138,247) 8%, rgb(116,49,249) 10%, rgb(235,48,244) 11%, rgb(37,186,52) 13%, rgb(19,21,99) 15%, rgb(237,47,47) 18%, rgb(49,138,247) 20%, rgb(49,138,247) 20%, rgb(34,43,173) 22%, rgb(83,242,48) 26%, rgb(245,52,47) 29%, rgb(89,160,32) 32%, rgb(237,237,47) 34%, rgb(27,137,134) 37%, rgb(244,48,124) 39%, rgb(114,214,42) 41%, rgb(242,119,48) 44%, rgb(161,216,43) 46%, rgb(48,135,242) 49%, rgb(244,48,238) 51%, rgb(49,237,247) 53%, rgb(247,49,125) 55%, rgb(137,219,43) 57%, rgb(220,45,229) 59%, rgb(187,219,43) 61%, rgb(29,59,147) 64%, rgb(192,48,244) 67%, rgb(229,45,76) 69%, rgb(242,119,48) 71%, rgb(44,224,212) 73%, rgb(196,39,138) 76%, rgb(197,48,242) 78%, rgb(239,242,48) 79%, rgb(54,39,196) 82%, rgb(45,229,94) 84%, rgb(229,104,45) 87%, rgb(41,195,209) 89%, rgb(181,36,171) 92%, rgb(232,48,242) 94%, rgb(62,181,36) 96%, rgb(42,74,214) 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgb(252,107,28) 0%,rgb(227,237,47) 2%,rgb(49,161,247) 4%,rgb(190,249,52) 6%,rgb(49,138,247) 8%,rgb(49,138,247) 8%,rgb(116,49,249) 10%,rgb(235,48,244) 11%,rgb(37,186,52) 13%,rgb(19,21,99) 15%,rgb(237,47,47) 18%,rgb(49,138,247) 20%,rgb(49,138,247) 20%,rgb(34,43,173) 22%,rgb(83,242,48) 26%,rgb(245,52,47) 29%,rgb(89,160,32) 32%,rgb(237,237,47) 34%,rgb(27,137,134) 37%,rgb(244,48,124) 39%,rgb(114,214,42) 41%,rgb(242,119,48) 44%,rgb(161,216,43) 46%,rgb(48,135,242) 49%,rgb(244,48,238) 51%,rgb(49,237,247) 53%,rgb(247,49,125) 55%,rgb(137,219,43) 57%,rgb(220,45,229) 59%,rgb(187,219,43) 61%,rgb(29,59,147) 64%,rgb(192,48,244) 67%,rgb(229,45,76) 69%,rgb(242,119,48) 71%,rgb(44,224,212) 73%,rgb(196,39,138) 76%,rgb(197,48,242) 78%,rgb(239,242,48) 79%,rgb(54,39,196) 82%,rgb(45,229,94) 84%,rgb(229,104,45) 87%,rgb(41,195,209) 89%,rgb(181,36,171) 92%,rgb(232,48,242) 94%,rgb(62,181,36) 96%,rgb(42,74,214) 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgb(252,107,28) 0%,rgb(227,237,47) 2%,rgb(49,161,247) 4%,rgb(190,249,52) 6%,rgb(49,138,247) 8%,rgb(49,138,247) 8%,rgb(116,49,249) 10%,rgb(235,48,244) 11%,rgb(37,186,52) 13%,rgb(19,21,99) 15%,rgb(237,47,47) 18%,rgb(49,138,247) 20%,rgb(49,138,247) 20%,rgb(34,43,173) 22%,rgb(83,242,48) 26%,rgb(245,52,47) 29%,rgb(89,160,32) 32%,rgb(237,237,47) 34%,rgb(27,137,134) 37%,rgb(244,48,124) 39%,rgb(114,214,42) 41%,rgb(242,119,48) 44%,rgb(161,216,43) 46%,rgb(48,135,242) 49%,rgb(244,48,238) 51%,rgb(49,237,247) 53%,rgb(247,49,125) 55%,rgb(137,219,43) 57%,rgb(220,45,229) 59%,rgb(187,219,43) 61%,rgb(29,59,147) 64%,rgb(192,48,244) 67%,rgb(229,45,76) 69%,rgb(242,119,48) 71%,rgb(44,224,212) 73%,rgb(196,39,138) 76%,rgb(197,48,242) 78%,rgb(239,242,48) 79%,rgb(54,39,196) 82%,rgb(45,229,94) 84%,rgb(229,104,45) 87%,rgb(41,195,209) 89%,rgb(181,36,171) 92%,rgb(232,48,242) 94%,rgb(62,181,36) 96%,rgb(42,74,214) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc6b1c', endColorstr='#2a4ad6',GradientType=1 );
position: absolute;
content: '';
height: 7px;
right: 0;
left: 0;
top: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.