CSS Border Image Generator
Note: border-image replaces a border's appearance but does not create one. With no border-width, or with border-style: none, nothing is drawn at all — which is almost always why it appears to do nothing.
Two things make it appear broken, and both are the same misunderstanding. First, border-image replaces the border but does not create one: without a border-width, or with border-style set to none, there is nowhere for the image to be drawn and nothing appears. Second, the slice values are in the source image's own pixels and are unitless — a slice of 30 means thirty pixels into the source, not thirty pixels of the rendered border. Getting those two right fixes almost every case of nothing showing up.
The repeat behaviour is the part worth experimenting with. stretch distorts the edge to fit, which is fine for a gradient and terrible for a pattern. repeat tiles it and usually cuts the last tile off mid-motif. round scales the tile slightly so a whole number fits, which is what you want for anything with a visible rhythm. space keeps the tile size and distributes the leftover as gaps.
One thing border-image cannot do: it ignores border-radius entirely. A rounded gradient border needs a different approach, usually a padding-box background with a border-box gradient behind it, and the generator emits that as an alternative.
Frequently Asked Questions
Why is my border-image not showing?
Nearly always because there is no border to draw it into. border-image replaces a border's appearance but does not create one — you need a border-width, and border-style must not be none. Set both and the image appears.
What units do the slice values use?
None — they are pixels of the source image, written without a unit. A slice of 30 means thirty pixels into the source file, regardless of how wide the rendered border is. Percentages are also allowed and are relative to the source's own dimensions.
Can I have a gradient border with rounded corners?
Not with border-image, which ignores border-radius completely. The usual technique is a transparent border with background-origin: border-box, layering a solid padding-box background over a gradient border-box one — the generator outputs that as an alternative.
Which repeat value should I use?
stretch for gradients, where distortion is invisible. round for any pattern with a visible rhythm, since it scales the tile so a whole number fits. repeat cuts the final tile off mid-motif, and space leaves gaps — both are usually wrong for decorative frames.
