img {
  --b: 5px;  /* border thickness*/
  --s: 30px; /* size of the dashes*/
  --g: 20px; /* the gap*/
  --c1: #215A6D;
  --c2: #92C7A3;
  
  --_g: calc(var(--g) - 1em);
  padding: calc(var(--b) + var(--_g));
  background: 
    repeating-conic-gradient(var(--c1) 0 25%,var(--c2) 0 50%) 
    0 0/var(--s) var(--s) round;
  --_p: calc(100% - var(--_g)  - 2*var(--b));
  --_m:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 25%,#000 0) 
     0 0/calc(100% - var(--b)) calc(100% - var(--b)),
    conic-gradient(from 90deg at var(--_g) var(--_g) ,#000 25%,#0000 0)
     var(--b) var(--b)/var(--_p) var(--_p);
  -webkit-mask: var(--_m);
          mask: var(--_m);
  cursor: pointer;
  transition: .4s;
  font-size: 0;
}
img:hover {
  font-size: calc(var(--g)/2);
  margin: calc(var(--g)/2)
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
  place-content: center;
  place-items: center;
  background: #C6A49A;
}