How to create Rectangle With Gradient Color Stripes Border via CSS?

Question

I want to create Round Edges Rectangle With Gradient Color Stripes Border.

I want to use the img tag or div tag to

Answer 1

Found somthing that can be a key to that design. See here: https://jsfiddle.net/rami7250/jaca7sb4/

Here is the source of the code: http://codepen.io/SitePoint/pen/DKhkf

CSS:

div {
  position: relative;
  height: 100%;

}
div:before, div:after {
  position: absolute;
  content: '';
  height: 1em;
  top: 0;
  left: 0;
  right: 0;
}
div:after {
  top: auto;
  bottom: 0;
}
div:before {
  background: linear-gradient(90deg, #1abc9c 1%, #2ecc71 1%, #2ecc71 29%, #3498db 29%, #3498db 32%, #9b59b6 32%, #9b59b6 37%, #34495e 37%, #34495e 53%, #f1c40f 53%, #f1c40f 69%, #e67e22 69%, #e67e22 67%, #e74c3c 67%, #e74c3c 74%, #ecf0f1 74%, #ecf0f1 100%, #95a5a6 100%);
}
div:after {
  background: linear-gradient(90deg, #1abc9c 10%, #2ecc71 10%, #2ecc71 12.5%, #3498db 12.5%, #3498db 28%, #9b59b6 28%, #9b59b6 35%, #34495e 35%, #34495e 60%, #f1c40f 60%, #f1c40f 69%, #e67e22 69%, #e67e22 83%, #e74c3c 83%, #e74c3c 88%, #ecf0f1 88%, #ecf0f1 96%, #95a5a6 96%);
}

div {
  padding-top: 20px;
  width: 450px;
}

However, i cant set it on the right and left side of the div. Only top and bottom effected.