CSS Pixels
Explore Tools
Home/Tools/Effects/Custom Border Generator
Effects · Generator

Custom Border Generator

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

Shape

Colors

Size & Sides

20px

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;
}
100%
Free, no
sign-up needed
0
Code written
by hand
85+
CSS tools
in one place
<1s
Copy-ready
CSS instantly
What is this

What is the CSS Custom Border Generator?

Generate custom CSS border styles - dashed, dotted, double, groove, ridge, and custom SVG borders. Preview and copy the complete CSS.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Custom Border Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

1

Choose border style

Select solid, dashed, dotted, double, groove, ridge, or inset. A live preview shows the border on a sample card.

2

Set width, colour, and radius

Adjust border-width, border-color, and border-radius independently for each side or uniformly.

3

Copy the CSS

Click Copy to get the complete border declaration.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css
/* Standard border styles */
.solid  { border: 2px solid #6C2EF5; }
.dashed { border: 2px dashed #6C2EF5; border-radius: 8px; }
.dotted { border: 3px dotted #6C2EF5; }
.double { border: 4px double #6C2EF5; }

/* Outline instead of border (no layout effect) */
.outlined {
  outline: 2px solid #6C2EF5;
  outline-offset: 4px;
}

outline does not affect layout dimensions - it renders outside the border box. Use it for focus rings and decorative outlines that should not shift element dimensions.

Pro tips

Pro tips for better results

★

Use outline for focus rings instead of border

Changing border on :focus can shift layout dimensions. outline does not affect layout. Use outline with outline-offset for accessible focus rings that do not move surrounding content.

★

Border shorthand sets width, style, and colour in one line

border: 2px solid #6C2EF5 is shorthand for border-width: 2px; border-style: solid; border-color: #6C2EF5. The style value is required - omitting it gives an invisible border.

★

Individual side properties override the shorthand

border: 1px solid #e2e8f0; border-bottom: 2px solid #6C2EF5 sets all sides to grey and then overrides just the bottom. Order matters - more specific rules must come after the shorthand.

FAQ

Frequently asked questions

border is part of the CSS box model and affects layout dimensions. outline is drawn outside the border and does not affect layout. outline also does not follow border-radius (it stays rectangular), while newer browsers support outline on rounded corners.
No. Everything runs in your browser. Nothing is sent to a server.

Related tools

View all tools →
BOXBox Shadow GeneratorEffectsTEXText Shadow GeneratorEffectsBORBorder Radius GeneratorEffectsGLAGlassmorphism GeneratorEffects

From the blog

Read more →
Guides

Modern CSS techniques every developer should know

A practical tour of the CSS features that replaced yesterday’s hacks.

7 min read·Guides
Workflow

From design to code without the friction

How visual generators speed up the build without sacrificing clean output.

5 min read·Workflow
Fundamentals

Writing CSS that scales with your project

Tokens, naming, and structure that keep large stylesheets maintainable.

6 min read·Fundamentals