CSS Border Image Generator

Home/Tools/Border Image Generator

Create decorative border images using SVG data URIs with slice, repeat, and outset controls.

No sign-up neededRuns in your browserProduction-ready CSS

Border Image

Custom Image URL

Controls

Border Width20px

Slice30

Fill

Image Width20px

Outset0px

Repeat

Preview

Border Image Preview

Generated CSS

.element {
  border: 20px solid transparent;
  border-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect width='15' height='15' fill='%23667eea'/%3E%3Crect x='15' y='15' width='15' height='15' fill='%23667eea'/%3E%3Crect x='15' width='15' height='15' fill='%23764ba2'/%3E%3Crect y='15' width='15' height='15' fill='%23764ba2'/%3E%3C/svg%3E') 30 / 20px / 0px round;
}

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.