A fancy frame with Zig-Zag borders

April 18, 2024

Use modern CSS to create a fancy Zig-Zag border around images using a few lines of code.

Only one element (the <img> tag)
No pseudo-element
Optimized with CSS variables

⚠️ Not suitable for touch screen (the sharp edges may hurt you) use wavy borders

CSS-only zig-zag borders

img {
  --s: 16px;  /* control the size of the spikes */
  --w: 250px; /* preferred image width */
  --c:#0B486B;
  
  width: round(var(--w),4*var(--s)); 
  aspect-ratio: 1;
  padding: calc(2*var(--s));
  --_c:#0000 calc(2*atan(2)),var(--c) 0;
  background:
    conic-gradient(from atan(-2) at 50% var(--s),var(--_c)),
    conic-gradient(from calc(180deg - atan(2)) at 50% calc(100% - var(--s)),var(--_c)) 0 100%;
  background-size: calc(4*var(--s)) 50%;
  background-repeat: repeat-x;
  mask:
    conic-gradient(from calc(atan(-2) - 90deg) at var(--s),var(--_c)),
    conic-gradient(from atan(.5) at calc(100% - var(--s)),var(--_c)) 100% 0;
  mask-size: 50% calc(4*var(--s));
  mask-repeat: repeat-y;
}

See the Pen CSS-only Zig-Zag box by Temani Afif (@t_afif) on CodePen.