CSS Tip

An infinite number of borders around images

Use the magic border-image and add as many borders as you want to your images for a fancy decoration

images with infinite borders

img {
  --s: 200px; /* image size */
  --b: 14px;  /* control the border thickness */
  --n: 5;     /* number of borders */
  --c: #774F38;
  
  width: var(--s);
  --_p:calc(var(--b)*var(--n));
  --_d:calc(var(--s)/(2*var(--n)) + var(--b));
  padding: var(--_p);
  border-radius: calc(var(--_p) + var(--b)/4);
  border-image:
    repeating-radial-gradient(
       var(--c) 0,#0000 2px calc(var(--_d)/2 - 2px),
       var(--c) calc(var(--_d)/2) var(--_d))
    49.8%/var(--_p);
  clip-path: inset(0 round var(--_p))
}

See the Pen CSS only Infinite borders ∞ by Temani Afif (@t_afif) on CodePen.

More CSS Tips