*{margin: 0;

   padding: 0;

}

.box{

  width: 300px;

  height: 300px;

  float: left;

  margin-right: 10px;

  text-align: center;

  line-height: 300px;

  font-size:25px;

  font-weight: bold;

}

.square{

  border: 10px solid;

  border-image: linear-gradient(45deg,#dd5875,#f39b00,#75bd4d,#059ee2);

  border-image-slice:1;

}

.circle{

  border:10px solid transparent;

  border-radius:50%;

  background-image:linear-gradient(#fff, #fff), linear-gradient(to bottom,#dd5875,#f39b00,#75bd4d,#059ee2);

  background-origin: border-box; 

  background-clip:padding-box, border-box;

}