CSS Custom Border Generator

Home/Tools/Custom Border Generator

Generate decorative section borders — zigzag, wavy, scalloped, torn paper — using SVG.

No sign-up neededRuns in your browserProduction-ready CSS

Shape

Colors

Border Color

Background Color

Size & Sides

Size / Frequency20px

Top BorderBottom Border

Preview

Section content here

Custom zigzag border — 20px

Generated CSS

.section {
  position: relative;
  background: #ffffff;
  padding: 40px 20px;
}

.section::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpolygon points='0,0 20,20 40,0' fill='%236366f1'/%3E%3C/svg%3E") repeat-x;
  background-size: 40px 20px;
}

Related Tools

Box Shadow Generator

Design complex box shadows with multiple layers, blur, spread, and color options.

Text Shadow Generator

Create eye-catching text shadows with multiple layers and effects.

Border Radius Generator

Fine-tune border radius for each corner with visual preview.