CSS Border Image Generator

How to use

1. 1Pick a preset to start, or choose a gradient type (linear, radial, or conic) and edit the color stops to design the source.
2. 2Set the slice values to control where the source is cut into corner and edge regions, and toggle fill if you want the center to show as a background.
3. 3Adjust the element border-width so the border image has room to paint, then set border-image-width and outset as needed.
4. 4Choose a repeat mode (stretch, repeat, round, or space) for the edges, and unlink the axes to set the vertical edges separately.
5. 5Watch the live preview update, switch the background to check contrast, and remember border-image needs a border-style and ignores border-radius.
6. 6Copy the full rule, the shorthand, or the longhand properties. Everything runs locally in your browser.

About this tool

The CSS Border Image Generator builds a working border-image declaration from a gradient and shows it rendering live as you change it, so you can stop guessing at one of the more confusing CSS properties. Instead of asking you to upload a picture, this tool uses a CSS gradient as the source, which means the border is defined entirely by text, travels with the CSS you copy, and never leaves your browser. You pick a linear, radial, or conic gradient and a list of color stops, and that exact gradient string is what both the preview and every copied output use, so what you see is what you ship. The four properties that make border-image hard to reason about each get a dedicated control. border-image-slice sets how far in from each edge the source is cut into the nine regions border-image uses: four corners, four edges, and one center; you can set the four sides together or independently in percent or pixels, and the fill keyword keeps the center region as a background instead of discarding it. border-image-width sets how thick the painted image is on each side and is a separate property from the element's border-width, which is a common source of confusion, so the tool exposes both. border-image-outset pushes the image outward beyond the border box. border-image-repeat decides how the edge slices fill each edge, with stretch, repeat, round, and space, and because the top and bottom edges can use a different mode from the left and right edges, you can link the axes or set them apart. The single most common reason border-image appears to do nothing is that the element has no border-style, because the property is silently ignored without one, so the recommended output always pairs the border-image with a transparent solid border that gives it room to paint. The tool also reminds you that border-radius does not clip a border image, which is why rounded corners on the box do not round the frame. Presets cover a warm stretched frame, a tiled conic ribbon, a filled neon panel, a thin accent border, and spaced diagonal stripes, and you can switch the preview between dark, light, and checker backgrounds to check contrast. Output comes three ways: a full rule for a selector you name, the border-image shorthand on its own, and the five longhand properties. Everything is computed in your browser and nothing you enter is uploaded, logged, or sent anywhere.

Free to use. Works in your browser. No signup, no login.