Styla saysborder-image paints an image (or gradient) as the border, sliced into corners and edges.
border-image takes a source and a slice value that cuts it into nine pieces — four corners, four edges, and a center. Corners stay fixed; edges stretch or repeat. It's niche but powerful for ornate frames and gradient borders (via a gradient source).
Power-ups you unlock
border-image-source + border-image-slice
Nine-slice: corners fixed, edges stretch/repeat
A gradient source makes gradient borders
Needs a border-width to show
The Specificity Sphinx attacks — common mistakes
Forgetting border-style/width so the image never shows
Wrong slice values distorting the corners
Reaching for it when a simple border suffices
Boss battleCreate a gradient border using a linear-gradient as border-image-source with slice 1.