CSS Wavy & Zig-Zag Border Generator
Create zig-zag, scalloped, scooped, and wavy CSS borders with masks and copy the code, no images needed.
Runs 100% in your browser
Shortcuts
- Copy the output
- Alt + Shift + C
Your input is saved in this browser only. Reset clears it.
Border Type
Border Size
Presets
Preview
CSS Code
.box {
mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/60px 100%
}How to use the Border Generator
-
Choose a border shape such as zig-zag or scalloped.
-
Adjust the size until the preview looks right.
-
Copy or download the CSS and add it to your element.
Example: A zig-zag bottom edge
Shape: zig-zag Size: 30px
.box {
mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/60px 100%
} The mask hides part of the element's edge, so the shape follows whatever background the element already has.
Frequently Asked Questions
How do CSS mask borders work?
Instead of drawing a border, a repeating gradient is used as a mask that hides parts of the element's edge. That's what produces zig-zag, scalloped, and wavy shapes, which plain border properties can't do. The element keeps its background; only the visible outline changes.
Do these borders work in all browsers?
The generated CSS uses the unprefixed mask property, supported in current Chrome, Edge, Firefox, and Safari. Older Safari versions need -webkit-mask, so include both if you support them. If masks aren't supported, the element simply renders with straight edges.
Can I use a decorative border on an image?
Yes. Apply the same mask CSS to an <img> and the image itself is cut to the shape. Keep important content away from the edges, since the mask removes pixels rather than drawing over them.
Are mask-based borders accessible?
They're purely decorative, so they don't affect screen readers. Just make sure the shape doesn't clip text or icons, and that any contrast the design relies on comes from the background rather than the cut-out edge.
About the Border Generator
The Border Generator helps you create custom CSS borders with unique shapes and styles that go beyond the standard rectangular borders. With this tool, you can design decorative borders like zig-zag, scalloped, wavy, and more for your web projects.
Three Visual CSS Tools covers when a visual border builder saves time, alongside the gradient and flexbox generators.
How CSS Border Shapes Work
Modern CSS techniques allow for creating non-rectangular borders using CSS masks, clip-paths, and SVG patterns. Our Border Generator uses these techniques to create various border styles:
CSS Masks
CSS masks use image or gradient sources to create transparency effects. The Border Generator uses mask-image with SVG patterns to create decorative borders while maintaining the element's content and functionality.
Border Positioning
You can apply custom borders to any side of an element (top, right, bottom, left) or to all sides. Each border can have its own style, size, and color for maximum design flexibility.
Border Styles Available
Zig-Zag Borders
Creates a sawtooth pattern along the border edge. Perfect for creating a torn paper effect, price tags, or adding visual interest to containers.
Scalloped Borders
Creates a series of semicircles along the border edge. Ideal for decorative containers, cards with a vintage feel, or creating a softer edge appearance.
Wavy Borders
Creates a smooth, undulating pattern along the border edge. Perfect for water-themed designs, creating a relaxed feel, or adding organic shapes to your layout.
Scooped Borders
Creates concave curves along the border edge. Great for creating a unique container shape, highlighting content, or adding a modern design element.
Features of the Border Generator
- Multiple border styles - Choose from various decorative border patterns
- Customizable properties - Adjust size, color, position, and other attributes
- Live preview - See your border design update in real-time
- Cross-browser compatibility - Generated code works across modern browsers
- Copy-ready CSS - Get the complete CSS code to implement your custom border
- Border positioning - Apply borders to specific sides or all sides of an element
How to Use the Border Generator
- Select a border style (zig-zag, scalloped, wavy, etc.)
- Choose which sides of the element should have the border
- Customize the border properties (size, color, etc.)
- Preview your design in real-time
- Copy the generated CSS code
- Implement the code in your web project
Creative Uses for Custom Borders
- Creating decorative content cards or containers
- Designing unique section dividers for long-form content
- Adding visual interest to image galleries or portfolios
- Creating themed designs (e.g., wavy borders for ocean-themed sites)
- Highlighting important information or call-to-action elements
- Designing custom coupon or ticket-style elements
Pro Tip
For the best performance, consider using these decorative borders sparingly on your page. While modern browsers handle CSS masks well, applying too many complex borders can impact rendering performance, especially on mobile devices.