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

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

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

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

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

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

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

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

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

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

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