<img src="https://picsum.photos/id/111/300/300" alt="a old car">
<img src="https://picsum.photos/id/183/300/300" style="--c: #668284;--s: 12px" alt="a old car">
img {
  --s: 10px;  /* size of the frame */
  --b: 2px;   /* border thickness */
  --w: 200px; /* width of the image */
  --c: #7B3B3B;
  
  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)) 0    0,
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100%;
  background-size: 15% 15%; 
  background-repeat: no-repeat;
  outline: calc(var(--w)/2) solid #0009;
  outline-offset: calc(var(--w)/-2 - var(--s));
  clip-path: inset(var(--s));
  transition: .4s;
  cursor: pointer;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--s);
  clip-path: inset(calc(-1*var(--s) - var(--b)));
  background-size: 45% 45%;
  transition: linear .3s, background-size .3s .4s;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.