Question 1

What is the CSS border-image property?

Accepted Answer

border-image lets you use an image (typically an SVG or gradient) as the border of an element. The property has five parts: border-image-source (the image), border-image-slice (how to cut it), border-image-width (border thickness), border-image-outset (how far it extends past the box) and border-image-repeat (how the slices fill the corners and edges). It is supported in all modern browsers.

Question 2

Why are my corners missing in the preview?

Accepted Answer

By default border-image overrides border-radius. If you want rounded corners on top of a border-image, use the wrapper-element technique shown in the Code tab — outer div has overflow:hidden + border-radius, inner div has the border-image applied.

Question 3

Can I upload my own SVG?

Accepted Answer

Yes. Click 'Upload SVG' in the patterns panel to use your own file. The SVG is converted to a data URL and used as border-image-source. For best results use a small square SVG (60-120 px) with transparent areas so the slice settings work correctly.

Question 4

What is the difference between 'stretch', 'repeat' and 'round'?

Accepted Answer

stretch (default) distorts the image to fill each edge. repeat tiles it from the start and clips overflow. round tiles it like repeat but rescales so a whole number of tiles fits — usually the smoothest option. pick the one that looks best for your pattern.

Pattern

Slice

Width & Outset

Repeat