<div class="box"></div>
+
<img src="https://picsum.photos/id/1016/200/200" alt="a canyon">
=
<img src="https://picsum.photos/id/1016/200/200" class="mask" alt="a canyon">

.box {
  --s: 20px;    /* size of the frame */
  --g: 10px;    /* the gap */
  
  padding: calc(var(--g) + var(--s));
  width: 200px;
  aspect-ratio:1;
  background:
    conic-gradient(from 90deg at calc(2*var(--s)) calc(2*var(--s)),#0000 25%,red 0)
     calc(-1*var(--s)) calc(-1*var(--s)),
    linear-gradient(blue 0 0) content-box;
}

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;
}
.mask {
  --_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;
  min-height:100vh;
  display:grid;
  place-content:center;
  align-items:center;
  grid-auto-flow:column;
  gap:20px;
  font-size:50px;
  font-weight:bold;
}