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