<img src="https://picsum.photos/id/188/300/300">
<img src="https://picsum.photos/id/407/300/300">
<img src="https://picsum.photos/id/122/300/300">
<img src="https://picsum.photos/id/43/300/300">
<img src="https://picsum.photos/id/274/300/300">
<img src="https://picsum.photos/id/670/300/300">
img {
  --s: 14px;  /* control the size of the wave */
  
  width: calc(3*4*var(--s));
  aspect-ratio: 1;
  object-fit: cover;
  padding: var(--s);
  border: var(--s) solid #0000;
  background: #BF4D28;
  border-radius: calc(3.5*var(--s)); 
  mask: 
    radial-gradient(calc(sqrt(2)*var(--s)),#000 calc(100% - 1px),#0000),
    conic-gradient(#000 0 0) content-box,
    radial-gradient(calc(sqrt(2)*var(--s)),#0000 100%,#000 calc(100% + 1px)) 
     var(--s) var(--s) padding-box;
  mask-size: calc(var(--s)*4) calc(var(--s)*4);
}
img:nth-of-type(1) {
  translate: var(--s) var(--s);
}
img:nth-of-type(2) {
  translate: 0 calc(-1*var(--s));
  width: calc(4*4*var(--s));
  height: calc(3*4*var(--s));
}
img:nth-of-type(3) {
  translate: calc(-1*var(--s)) var(--s);
}
img:nth-of-type(4) {
  translate: calc(3*var(--s)) 0;
}
img:nth-of-type(5) {
  translate: 0 calc(-2*var(--s));
  margin: auto;
  height: calc(4*4*var(--s));
}
img:nth-of-type(6) {
  translate: calc(-3*var(--s)) 0;
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-template-columns: repeat(3,auto);
  background: #F2E9E1;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.