<img src="https://picsum.photos/id/1015/300/300" alt="a canyon and a lake">
<img src="https://picsum.photos/id/1016/300/300" alt="a canyon" style="--g: 20px;--b:5px;--c:#D95B43;">
img {
  --s: 250px;   /* the size of the image */
  --b: 8px;     /* the border thickness*/
  --g: 14px;    /* the gap */
  --c: #4ECDC4; /* the color */
  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s)/2) solid #0009;
  outline-offset: calc(var(--s)/-2);
  cursor: pointer;
  transition: .3s;
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);

img + img {
  border-radius: 50%;

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.