<img src="https://picsum.photos/id/115/300/300" >
<img src="https://picsum.photos/id/283/300/300" style="background-image: linear-gradient(45deg,#F8CA00,#FF6B6B);">

img {
  --s: 20px;  /* control the size of the wave */
  --w: 350px; /* preferred image width */
  
  width: round(var(--w),4*var(--s));
  aspect-ratio: 1;
  border: calc(2*var(--s)) solid #0000;
  padding: calc(1.5*var(--s));
  box-sizing: border-box;
  background: linear-gradient(#4ECDC4,#556270) border-box;
  mask: 
    conic-gradient(#000 0 0) no-repeat
     50%/calc(100% - 6*var(--s)) calc(100% - 6*var(--s)),
    radial-gradient(var(--s),#000 100%,#0000 calc(100% + 1px)) 
     0 0/calc(4*var(--s)) calc(4*var(--s)),
    radial-gradient(var(--s),#0000 calc(100% - 1px),#000) 
     var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s)) padding-box;
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  background: #F2E9E1;
}