CSS — Border Images

The idea

Any image can become a border — sliced into nine pieces whose edges wrap the element:

.fancy-frame {
    border: 20px solid transparent;          /* reserves border space */
    border-image-source: url("frame.png");   /* the slicing sheet     */
    border-image-slice: 30;
    border-image-width: 20px;
    border-image-repeat: round;
}

How slicing works

The slice number cuts the image into a tic-tac-toe grid:

┌────┬─────────┬────┐
│ c1 │   top   │ c2 │      corners → element's corners
├────┼─────────┼────┤      edges   → stretched/repeated along sides
│left│ center  │right│     center  → fills the box (or discarded)
├────┼─────────┼────┤
│ c3 │  bottom │ c4 │
└────┴─────────┴────┘

Property	Job
source	image (or gradient!)
slice	inset distances cutting the 9 regions
width	how thick the drawn border is
repeat	stretch · round · space · repeat

round scales tiles so they fit whole — usually prettiest.

Gradient borders without images

border-image accepts gradients directly — no file needed:

.gradient-border {
    border: 4px solid transparent;
    border-image: linear-gradient(45deg, teal, gold) 1;
}

(A teal→gold gradient sweeping around the box edges.)

The 1 slice with gradients means "use whole gradient per edge."

The modern alternative: SVG + radius

border-image famously ignores border-radius. When rounded gradient borders are needed:

.rounded-gradient {
    position: relative;
    background: white;
    border-radius: 12px;
}
.rounded-gradient::before {
    content: "";
    position: absolute;
    inset: -3px;                       /* ring thickness */
    border-radius: 15px;
    background: linear-gradient(45deg, teal, gold);
    z-index: -1;
}

(Same gradient edge, fully roundable, works everywhere.)

This pseudo-element ring pattern replaced most real-world border-image usage.

Practical checklist

• border-style must be set (transparent solid) or nothing shows
• box-sizing: border-box keeps layout predictable
• Slices count pixels for raster images, percentages allowed (33%)
• Test repeat values — stretch can smear pixel art

Mini Practice

1. Nine-slice a downloaded frame PNG onto a card.
2. Swap repeat modes; observe stretch vs round.
3. Gradient border via border-image shorthand.
4. Rebuild it rounded with the ::before ring technique.
5. Compare which approach survives border-radius: 50%.

Next: backgrounds advanced →