Home/Tools/Effects/Border Image Generator

Effects · Generator

Border Image Generator

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

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;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Border Image Generator?

Generate border-image CSS for gradient and image borders. Set slice, width, outset, and repeat. Preview on any element size.

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 Border Image 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.

Set the border-image-source

Enter a gradient or image URL as the border image source. Gradients are the most common use case.

Set slice, width, and outset

border-image-slice: 1 is correct for gradients. Set border-width to control thickness. Outset extends the border outside the element box.

Copy the CSS

Click Copy to get the border-image shorthand or individual sub-properties.

The output

What the generated code looks like

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

styles.css

/* Gradient border using border-image */
.gradient-border {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #6C2EF5, #f97316) 1;
}

/* Thicker gradient border */
.thick-border {
  border-width: 4px;
  border-style: solid;
  border-image-source: linear-gradient(90deg, #6C2EF5, #f97316);
  border-image-slice: 1;
}

border-image does not support border-radius. For rounded gradient borders, use the pseudo-element technique instead.

Pro tips

Pro tips for better results

★

border-image does not support border-radius

This is the most common gotcha. border-image and border-radius are incompatible. For rounded gradient borders, use background-clip or a pseudo-element background instead.

★

Use border-image-slice: 1 for gradient borders

When using a linear or radial gradient as the border image, border-image-slice: 1 stretches the gradient across the entire border. This is almost always the correct value for gradient borders.

★

border must have a non-transparent style for border-image to show

Set border: 3px solid transparent before applying border-image. The border-image replaces the solid colour, but the border must have a non-zero width and a style (solid, dashed, etc.).

FAQ

Frequently asked questions

border-image does not work with border-radius. Instead: set background: gradient on a pseudo-element, padding: [border-width], border-radius, and position: absolute; inset: 0. Then set z-index: -1 and give the real element a clip with overflow or background-clip.

No. Everything runs in your browser. Nothing is sent to a server.