vertical multi color border css

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

1<div class="fancy-border">
2  my content
3</div>

1body {
2  background: #ccc;
3}
4
5.box {
6  text-align: center;
7  position: relative;
8  line-height: 100px;
9  background: #fff;
10  height: 100px;
11  width: 300px;
12}
13
14.box:after {
15  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
16  position: absolute;
17  content: '';
18  height: 4px;
19  right: 0;
20  left: 0;
21  top: 0;
22}

1<div class="box">Div</div>

1.test {
2  width: 500px;
3  height: 100px;
4  background-color: #ccc;
5  position: relative;
6}
7
8.test:before,
9.test:after {
10  content: "";
11  position: absolute;
12  left: 0px;
13  right: 0px;
14  height: 10px;
15  background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
16  background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
17  background-size: 80px;
18}
19
20.test:before {
21  top: 0px;
22}
23
24.test:after {
25  bottom: 0px;
26}

1<div class="test"></div>