Skip to main content
iotools.cloudiotools.cloud

CSS Border Style Generator

Generate decorative CSS border edges — zigzag, wavy, or scalloped — that plain border-radius can't produce, with independent style, size and depth per side (top/right/bottom/left) via mask-image and repeating gradients.

Input

Colors

Top edge

Width of one repeat — one full peak-to-peak cycle, in pixels.

How far the wave/tooth/scallop reaches from the flat edge, in pixels.

Right edge

Bottom edge

Width of one repeat — one full peak-to-peak cycle, in pixels.

How far the wave/tooth/scallop reaches from the flat edge, in pixels.

Left edge

Output

The generated rules are scoped to this class, so they won't collide with your own styles.

Output

Your border style will appear here.

CSS
HTML snippet

Matches the preview above — pair it with the CSS block.

Preview markup (inline styles)
Was this helpful?

Guides

What this tool does

Plain border and border-radius can only draw straight lines and round corners — they can't put a torn-paper zigzag along the top of a card, a wavy line under a banner, or a scalloped "ticket stub" edge on a coupon. This tool builds those decorative edges in pure CSS, using mask-image (with repeating linear-gradient/radial-gradient patterns) to cut a wave shape into a thin colored strip on each side of a box — no image file, no SVG, no JavaScript.

Each side — top, right, bottom, left — toggles on independently and gets its own style (Zigzag, Wavy, or Scallop), plus its own Size (the width of one repeat) and Amplitude (how deep the wave reaches). Mixing styles per side is what makes a ticket-stub look (scalloped top, straight sides) or a torn-notebook look (zigzag top and bottom only) possible.

How to use it

  1. Set the Box background and Edge color.
  2. For each side you want decorated, enable it and pick a style:
    • Zigzag — sharp triangular teeth, like a torn edge or a pennant-flag border.
    • Wavy — the same peak/valley rhythm as zigzag, but rounded into a smooth S-curve.
    • Scallop — a row of uniform round bumps, all curving the same way — a stamp-perforation or lace-edge look.
  3. Tune Size (spacing between peaks) and Amplitude (how far the wave reaches) per side.
  4. Copy the CSS and HTML snippet — the snippet is a wrapper <div> plus one child <div> per enabled side; the CSS masks each child into the chosen wave.

Why mask-image instead of border-image or clip-path

A border-image is one 9-slice source image applied around the whole box at once, so all four sides are forced into variations of the same image — there's no way to give the top a zigzag and the left a plain edge. clip-path can cut the box's entire outline into one shape, but not one edge in isolation while the others stay straight. Masking an independent overlay strip per side is what makes each edge toggle and configure on its own.

Browser support

mask-image is unprefixed in all current browsers; the CSS also ships the -webkit-mask-* equivalents alongside it for older WebKit engines that only recognized the prefixed form.

FAQ

Can I round the box's actual corners too? Yes — add your own border-radius to the wrapper <div> (the .io-border-box-style class this tool generates); the edge strips still mask correctly since they're independent overlay layers, though a large radius may need the strip's own corners eased in by hand for a perfectly clean join. For simple rounded corners without any wave, use the Border Radius Generator instead.

How is this different from a drop shadow or a clipped shape? A CSS Box Shadow Generator softens the edges of a box with a blur, not a repeating wave pattern. A CSS Clip-Path Generator cuts the whole box into one fixed shape (a circle, a star, a polygon) rather than decorating one edge while leaving the rest of the box rectangular.

Why does the wave sometimes cut all the way to the box's outer edge? That's the "valley" of the pattern — at the mid-point between two peaks, the strip's mask goes fully transparent, exposing the box's own background color underneath. It's intentional: it's what makes the edge read as a genuine zigzag/wave/scallop rather than a straight line with bumps on it.

Privacy

Everything runs in your browser. Your colors and settings are never sent to a server — the CSS and preview update locally as you adjust the controls.

zigzag borderwavy borderscalloped bordertorn edgeticket edge cssstamp edgejagged bordercss maskdecorative borderweb design

Use it from code

From 3 credits per call

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-border-style-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "bgColor": "#ffffff",
    "edgeColor": "#6366f1",
    "topEnabled": "true",
    "topStyle": "zigzag",
    "topSize": "24",
    "topAmplitude": "12",
    "rightEnabled": "",
    "rightStyle": "wavy",
    "rightSize": "24",
    "rightAmplitude": "12",
    "bottomEnabled": "true",
    "bottomStyle": "zigzag",
    "bottomSize": "24",
    "bottomAmplitude": "12",
    "leftEnabled": "",
    "leftStyle": "wavy",
    "leftSize": "24",
    "leftAmplitude": "12",
    "className": "io-border-box"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `css-border-style-generator` tool (CSS Border Style Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads