Build the border-image shorthand with a live preview. border-image-slice defines the four corner cuts; border-image-width sets how wide the painted border is; border-image-outset pushes the image past the box; border-image-repeat decides whether the middle stretches, tiles (repeat), tiles whole copies (round), or distributes with gaps (space). Nine slices land at the corners, edges, and center.
Built-in SVG nine-slice images — all embedded as data URIs, nothing fetched from the network.
Paste a url(...), linear-gradient(...), or a data URI. Local files never upload — pick from the presets or paste your own data URI.
border-width. 1 means use the border exactly; 2 doubles it.fill, the center slice is discarded — the box's own background shows through.round scales each tile to fit a whole number of repetitions; space distributes tiles with gaps. stretch is the default and often blurs.border-style (anything other than none) and a non-zero border-width — border-image won't paint without them.