Border Generator

Create custom CSS borders with different shapes like zig-zag, scooped, scalloped, or wavy using CSS masks.

Border Type

Border Size

10px30px60px

Presets

Preview

Zig-Zag BorderSize: 30px

CSS Code

.box {
  mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/60px 100%
}

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.

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

  1. Select a border style (zig-zag, scalloped, wavy, etc.)
  2. Choose which sides of the element should have the border
  3. Customize the border properties (size, color, etc.)
  4. Preview your design in real-time
  5. Copy the generated CSS code
  6. 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.