Advanced borders with `border-image`

Master `border-image`: the 9-slice model, `slice`/`width`/`repeat` control, fallbacks and reusable patterns for real components.

How much do you know about CSS?

📘 Theory

Mental model: 9 slices and the border area

The browser divides the source into a 3x3 grid: four corners, four edges and a center region. Most of the time you only render the perimeter, but the center can be kept with `fill`.

Always create the border area first with `border`, then layer `border-image` on top. If you skip that first step, it can look as if the property is broken.

`slice`, percentages and `fill`

`slice` decides where the source is cut, either with numbers or percentages.
`fill` keeps the center region too, which is useful for textured frames or sticker-like effects.
A poorly calibrated slice value can distort the corners, so gradients often start safely at `1`.

`width`, `repeat` and visual stability

`border-image-width` controls the final painted thickness and does not always need to match the original `border-width` exactly.

`repeat` is often the safest choice for patterned frames, while `round` helps avoid awkward clipping when the source does not divide evenly.

Progressive fallback

Set a useful plain `border-color` first so the component still has contrast.
Use `@supports` to enable the enhanced frame only when it makes sense.
Do not rely on a decorative border alone to communicate a critical state.

1 Mental model: 9 slices and the border area 2 `slice`, percentages and `fill` 3 `width`, `repeat` and visual stability 4 Progressive fallback

🧪 Learn by doing

Example Interactive demo: slice, thickness and repeat mode Tune the key parameters to understand why one frame feels clean and another feels distorted.

⌄

Example Example: feature card with a dynamic frame A practical pattern for highlighted cards without adding extra pseudo-elements.

⌄