<img src="https://picsum.photos/id/1040/300/200">
<img src="https://picsum.photos/id/116/200/200" style="--s:25px">
<img src="https://picsum.photos/id/193/150/200" style="--s:10px;">
img {
  --s: 15px; /* control the size of the frame */
  
  padding: var(--s);
  --_g: #aa6342 90deg,#0000 0;
  --_d: var(--s) calc(2*var(--s)) no-repeat space;
  background:
    conic-gradient(from 45deg  at 0%  ,var(--_g)) 100%/var(--_d),
    conic-gradient(from 225deg at 100%,var(--_g)) 0   /var(--_d),
    linear-gradient(#c69781 var(--s),#aa6342 0 calc(100% - var(--s)),#944b29 0);
  box-shadow: 2px 2px 4px #0009;
  outline: 2px solid #f2f2f2;
  outline-offset: calc(-1*var(--s));
  margin: auto;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  grid-gap: 30px;
  background: #faf0e6;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.