Skip to main content

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;
padding: calc(2*var(--s));
--_c:#0000 calc(2*atan(2)),var(--c) 0;
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;
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.