Use this CSS border-image generator to build gradient, pattern, or custom-image borders and copy the finished code — no image editor or signup required.
How far in from each edge of the source image the slice lines sit.
How thick the rendered border is on screen.
How far the border image extends beyond the element’s edge.
Your content sits inside this box. Adjust the controls to shape the border around it.
How border-image works in CSS
border-image replaces a plain, solid border with a picture, a pattern, or a gradient, sliced into nine pieces so it can stretch or repeat around any box without distorting the corners. It’s a shorthand for five properties working together: border-image-source (what the border is made of), border-image-slice (where it gets cut), border-image-width (how thick it renders), border-image-outset (how far it sits outside the box edge), and border-image-repeat (how the sliced pieces fill the remaining space).
The generator above builds all five for you. Pick a source, adjust the sliders, and the CSS panel updates instantly — copy it straight into your stylesheet.
Understanding border-image-slice
border-image-slice sets four cut lines — one in from each edge of the source image — that split it into nine regions: four corners, four edges, and a center. The four corner regions get placed directly onto your element’s corners without any stretching, while the four edge regions stretch or repeat to fill the space between them, which is what keeps a border-image from warping oddly at the corners the way a stretched background image would.
The values are usually plain numbers, not pixels — they refer to the source image’s own coordinate grid, not the size of the rendered border. A slice value of 30 cuts 30 units in from each edge, using the image’s natural pixels (or the SVG’s viewBox units) as the ruler, whatever the final border-image-width ends up being.
By default, the center region — everything inside all four slice lines — is discarded entirely, so it never appears. Add fill to the value (the checkbox in the slice panel above) to keep that center region and render it as the element’s background as well as its border. This matters most when the border art itself contains texture or color you want carried into the box, rather than leaving the center transparent.
Using a gradient as a border-image
Yes — border-image-source accepts any CSS <image> value, and a linear-gradient() or radial-gradient() function qualifies just as much as a url() reference. That means you can generate a gradient-bordered box without touching an image file at all, which is exactly what the Gradient tab above does.
Because a gradient has no fixed pixel dimensions the way a bitmap does, border-image-slice behaves a little differently here: it slices the gradient as if it were rendered at the size of the border box itself. In practice, this makes gradient borders easier to reason about than image ones — start with a slice around 25–33% and adjust from there, rather than hunting for the right pixel count on a source file.
When to use border-image
- Freelancers and agencies polishing a client site — a subtle gradient or patterned border on cards, pull quotes, or CTA buttons adds visual distinction without needing a designer-supplied asset or an extra plugin.
- Design systems that need a repeatable border treatment — because the output is plain CSS, the same border-image rule drops cleanly into a WordPress theme’s stylesheet, a page builder’s custom CSS field, or a component library, and updates from one place.
- One-off decorative elements — event banners, badges, or seasonal promo boxes where a fancier border communicates the occasion faster than a plain 1px line.
Browser support
border-image and its longhand properties are supported in all current major browsers — Chrome, Firefox, Safari, and Edge — and have been for years, so there’s no vendor-prefixing or fallback needed for modern projects. The one thing worth double-checking is border-image-repeat: round, which rounds the number of repeated tiles so they fit evenly; rendering can vary slightly by browser when the box size doesn’t divide evenly into the source’s edge width, so preview it at your actual target size rather than assuming pixel-perfect consistency across browsers.
FAQ
What is border-image-slice and how does it work?border-image-slice marks four cut lines in from the edges of the border-image source, splitting it into nine regions so the corners stay sharp while the edges stretch or repeat — see the dedicated section above for the full breakdown.
Can you use a CSS gradient as a border-image?
Yes — linear-gradient() and radial-gradient() are both valid border-image-source values, so you can build a gradient border with pure CSS and no image file, exactly like the Gradient tab in the generator above.
Is border-image supported in all browsers?
Yes, border-image has full support across current Chrome, Firefox, Safari, and Edge, with no prefixes needed for modern projects.
How is border-image different from border-radius or box-shadow?border-radius rounds an existing solid border’s corners and box-shadow adds a shadow around a box’s outline, but neither can replace the border itself with an image, pattern, or gradient — that’s what border-image is for, and it can be combined with border-radius and box-shadow on the same element for additional effect (note that some browsers clip border-image to the border-radius, so test the combination on your target browsers).
Do you need an actual image file to use border-image?
No — a gradient generated purely in CSS works just as well as an uploaded file, and this generator supports both along with a set of built-in pattern presets if you want to skip file preparation entirely.