<img src="https://picsum.photos/id/593/300/300" alt="a tiger">
<img src="https://picsum.photos/id/433/300/300" style="--c: #594F4F;--s: 20px;--b:3px" alt="a bear">

img {
  --s: 16px;  /* size of the frame */
  --b: 6px;   /* border thickness */
  --w: 250px; /* width of the image */
  --c: #BF4D28;
  
  width: var(--w);
  aspect-ratio: 1;
  object-fit: cover;
  padding: var(--s);
  --_g: #0000 25%,var(--c) 0;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 
      var(--_p,-5%) var(--_p,-5%),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 
      calc(100% - var(--_p,-5%)) var(--_p,-5%),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 
      var(--_p,-5%) calc(100% - var(--_p,-5%)),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 
      calc(100% - var(--_p,-5%)) calc(100% - var(--_p,-5%));
  background-size: 20% 20%; 
  background-repeat: no-repeat;
  outline: calc(var(--w)/2) solid #0005;
  outline-offset: calc(var(--w)/-2 - var(--s));
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition: .4s;
  cursor: pointer;
}
img:hover {
  outline-offset: 2px;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  --_p: calc(var(--s)/4);
  transition:  .3s, background-position .3s .35s;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  align-items: center;
  grid-auto-flow: column;
  gap: 20px;
  background: #ECD078;
}