<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.