How to use the Zigzag Border CSS
- The preview starts with a zigzag bottom edge; set the number of teeth with Repeats.
- Choose Scallops for rounded teeth or Steps for a staircase.
- Choose Both for a receipt or ticket look.
- Copy the CSS.
Zigzag edges with clip-path
Each tooth is two polygon points: one on the edge, one cut in by the tooth depth. Because x positions are percentages, the teeth always span the full width; set the depth in px so they keep their height. For a receipt look cut both edges with a small depth and many repeats.
More edge shapes are in the Section Divider Generator.
Also searched as: css zigzag edge, jagged edge css, sawtooth border css, scalloped edge css, receipt edge css, ticket edge css.
Tools that pair well with the Zigzag Border CSS
- Angled Section CSS — Build angled, slanted or diagonal sections — the classic landing-page look — with one clip-path rule.
- Curved Section Divider — Round off the edge of a hero or section with a curve — convex, scooped, a curved angle, a gentle wave or scallops — using only CSS.
- CSS Triangle Generator — Make a pure-CSS triangle for a tooltip arrow, dropdown caret or speech bubble: choose one of 8 directions, the width, height and color, and copy either the classic border trick or a simpler clip-path version.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
Frequently asked questions
How do I make a zigzag edge in CSS?
Use clip-path: polygon() with points that alternate between the edge and the cut depth across the width. Choose Zigzag here, set the repeats and copy the CSS.
Can I make a torn receipt edge?
Yes — choose Zigzag, the Both edge, a small depth (8–12 px) and 20 or more repeats.
How do I keep teeth the same size on wide screens?
The tooth count is fixed, so teeth get wider on wide screens. For a fixed tooth width, use a repeating mask with conic-gradient instead, or raise the count for desktop in a media query.
Can I install Zigzag Border CSS as a web app and use it offline?
Yes. Zigzag Border CSS is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.