CSS Tip

A fancy frame with Zig-Zag borders

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

⚠️ 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 */
  
  width: round(var(--w),4*var(--s)); 
  aspect-ratio: 1;
  --_m:#0000 0 calc(2*atan(.5)),#000 0 50%;
  mask:
    repeating-conic-gradient(from atan(2) at 50% var(--s),var(--_m))
     calc(2*var(--s)) calc(-1*var(--s))/calc(4*var(--s)) 100% intersect,
    repeating-conic-gradient(from atan(-.5) at var(--s),var(--_m))
     calc(-1*var(--s)) calc(2*var(--s))/100% calc(4*var(--s));
}

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

More CSS Tips