/* reference: https://www.hongkiat.com/blog/css-gradient-border/ */

html {
  overflow-y: scroll;
}

body {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
}

.box1 {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #eee;
  border-top: 20px solid #3ACFD5;
  border-bottom: 20px solid #3a4ed5;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 20px 100%;
  background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
}

.box2 {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #eee;
  border-bottom: 20px solid #3ACFD5;
  border-top: 20px solid #3a4ed5;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 20px 100%;
  background-image: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
}

.box3 {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #eee;
  border-left: 20px solid #3ACFD5;
  border-right: 20px solid #3a4ed5;
  box-sizing: border-box;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 20px;
  background-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
}

.box4 {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #eee;
  border-right: 20px solid #3ACFD5;
  border-left: 20px solid #3a4ed5;
  box-sizing: border-box;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 20px;
  background-image: linear-gradient(to left, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to left, #3acfd5 0%, #3a4ed5 100%);
}

.cir1 {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #eee;

  border-top: 20px solid #FFA500;
  border-bottom: 20px solid #3a4ed5;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 20px 100%;
  background-image: linear-gradient(to bottom, #FFA500 0%, #3a4ed5 100%), linear-gradient(to bottom, #FFA500 0%, #3a4ed5 100%);
}

.cir2 {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #eee;

  border-bottom: 20px solid #FFA500;
  border-top: 20px solid #3a4ed5;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 20px 100%;
  background-image: linear-gradient(to top, #FFA500 0%, #3a4ed5 100%), linear-gradient(to top, #FFA500 0%, #3a4ed5 100%);
}

.cir3 {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #eee;

  border-left: 20px solid #FFA500;
  border-right: 20px solid #3a4ed5;
  box-sizing: border-box;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 20px;
  background-image: linear-gradient(to right, #FFA500 0%, #3a4ed5 100%), linear-gradient(to right, #FFA500 0%, #3a4ed5 100%);
}

.cir4 {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #eee;

  border-right: 20px solid #FFA500;
  border-left: 20px solid #3a4ed5;
  box-sizing: border-box;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 20px;
  background-image: linear-gradient(to left, #FFA500 0%, #3a4ed5 100%), linear-gradient(to left, #FFA500 0%, #3a4ed5 100%);
}