<img src="https://picsum.photos/id/1016/200/200" alt="a canyon">
img {
  --s: 20px;    /* size of the frame */
  --g: 10px;    /* the gap */
  --c: #FA6900; 
  
  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side,var(--c) 97%,#0000)
    0 0/calc(2*var(--s)) calc(2*var(--s)) round;
  --_m:
    conic-gradient(from 90deg at calc(2*var(--s)) calc(2*var(--s)),#0000 25%,#000 0)
     calc(-1*var(--s)) calc(-1*var(--s)),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
}


body {
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
  background:pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.