CSS SCALLOPED & ZIGZAG EDGE GENERATOR

Example output (default settings)

.scalloped {
  width: 360px;
  height: 200px;
  background: #ffb347;
  -webkit-mask: linear-gradient(#000 0 0) 14px 14px / calc(100% - 28px) calc(100% - 28px) no-repeat,
    radial-gradient(circle 14px at 50% 100%, #000 98%, #0000) 0 0 / 28px 14px round no-repeat,
    radial-gradient(circle 14px at 0 50%, #000 98%, #0000) 100% 0 / 14px 28px no-repeat round,
    radial-gradient(circle 14px at 50% 0, #000 98%, #0000) 0 100% / 28px 14px round no-repeat,
    radial-gradient(circle 14px at 100% 50%, #000 98%, #0000) 0 0 / 14px 28px no-repeat round;
  mask: linear-gradient(#000 0 0) 14px 14px / calc(100% - 28px) calc(100% - 28px) no-repeat,
    radial-gradient(circle 14px at 50% 100%, #000 98%, #0000) 0 0 / 28px 14px round no-repeat,
    radial-gradient(circle 14px at 0 50%, #000 98%, #0000) 100% 0 / 14px 28px no-repeat round,
    radial-gradient(circle 14px at 50% 0, #000 98%, #0000) 0 100% / 28px 14px round no-repeat,
    radial-gradient(circle 14px at 100% 50%, #000 98%, #0000) 0 0 / 14px 28px no-repeat round;
}

<div class="scalloped">
  <!-- your card, badge or coupon content here -->
</div>

How to make a scalloped or zigzag edge

1. 1

   Choose Scalloped or Zigzag, and whether the edge bumps outward or is cut inward.

2. 2

   Switch on the sides that should get the edge: top, right, bottom, left.

3. 3

   Set the scallop or tooth width (and the tooth depth for zigzag), the block size and the color.

4. 4

   Copy the CSS and HTML, or copy a link to your settings, and paste it into your page.

Questions

How is the edge made without an image or SVG?

The shape comes from CSS mask layers. A radial-gradient draws each scallop and a conic-gradient draws each zigzag tooth, repeated along the edge, so the browser clips the element to that outline. There is nothing to download and the edge scales with the element.

What is the difference between bumps outward and cut inward?

With bumps outward, the block keeps its full area and scallops or teeth are added along the chosen edges; the body is inset by the edge depth to make room. With cut inward, the block keeps its size and half-circles or V-notches are removed from the edge, like a coupon or a postage stamp.

Why does the scallop count change slightly when I resize?

The mask tiles use background-repeat: round, which scales the tile a little so a whole number of scallops or teeth fits the edge. That avoids a half-cut scallop at the end. The tile width you set is the target; the real width can differ by a few percent.

Does it work on top of photos and gradients?

Yes. A mask removes pixels from the element itself, so the edge is transparent over photos, gradients and dark mode. Painting scallops in the page background color would only work on one flat background.

Does the CSS work in Safari and older browsers?

The output sets both -webkit-mask and the standard mask, plus -webkit-mask-composite: source-in next to mask-composite: intersect for the cut-inward style. Current Chrome, Edge, Firefox and Safari support it. A browser without mask support shows a plain rectangle.

How do I keep text from touching the scalloped edge?

Put your content inside the .scalloped element and add padding at least as large as the edge depth on every side that has the edge. For scallops the depth is half the scallop width; for zigzag it is the tooth depth you picked.

Related tools

• CSS Ticket & Coupon Shape GeneratorGenerate CSS for a ticket or coupon shape with notched sides, top and bottom, or cut corners and a dashed perforation line, using a transparent mask.
• CSS Mask / Fade Edge GeneratorFade out the edges of an image or block with a mask-image gradient — top, bottom, sides, or all edges — and copy the CSS.
• CSS Animated Glowing Border GeneratorBuild a rotating conic-gradient border that chases around a card, with adjustable speed, thickness, and glow blur.
• CSS Gradient Border GeneratorBuild a rounded gradient border with 2-5 color stops using the padding-box/border-box trick, and copy the CSS.
• CSS Ribbon GeneratorGenerate CSS and HTML for a diagonal corner sash or a banner ribbon with a swallowtail, arrow, or flat tail, with custom text, colors, and shadow.
• CSS Torn Paper Edge GeneratorGenerate CSS for a ripped, torn-paper edge on any block with clip-path: choose the torn sides, tear depth and detail, shuffle the pattern, and add a drop shadow.
• CSS Speech Bubble GeneratorBuild a chat-style speech bubble with a border-trick tail on any side, and copy the CSS.
• CSS Squircle GeneratorBuild an iOS-style continuous-curve squircle from a superellipse formula rendered as a clip-path polygon, and copy the CSS.