border-image
Drawing an image around an element as its border.
Overview
| Class | Declarations |
|---|---|
border-image:initial | border-image: initial;
|
border-image:inherit | border-image: inherit;
|
border-image:<source>|<slice> | border-image: <source> <slice>;
|
border-image:<source>|<slice>/<width> | border-image: <source> <slice>/<width>;
|
border-image:<source>|<slice>/<width>/<outset>|<repeat> | border-image: <source> <slice>/<width>/<outset> <repeat>;
|
Basic usage
Draw a gradient border image
The shorthand sets the source, slice, width, outset and repeat behavior. A 12px solid blue border supplies layout width and a visible fallback; the gradient supplies the painted edge.
<!-- Gradient image · complete shorthand --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) border-image:linear-gradient(135deg,#2563eb,#7c3aed)|1 font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>Generated CSS
@layer utilities { .border-image\:linear-gradient\(135deg\,\#2563eb\,\#7c3aed\)\|1 { border-image: linear-gradient(135deg, #2563eb, #7c3aed) 1 }}The 1 is a source slice, while the omitted image width defaults to 1 times the regular border width. Omitted shorthand components reset to their initial values.
Include width and repeat
A slash introduces the painted width; the following repeat keyword controls the edge tiles. Compare a native width multiplier with an explicit CSS length on the same 12px border.
<!-- Width 2 · 24px paint --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) border-image:url('/demo/border-grid.svg')|24/2|round font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div><!-- Width 16px · explicit paint --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) border-image:url('/demo/border-grid.svg')|24/16px|round font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>/2 means twice each regular border width. /16px means 16px; /16 would mean sixteen times the border width. Image paint does not change the measured 250 × 130 layout box.
Apply conditionally
At sm, a patterned image replaces the regular blue border. Print removes the image and shows that authored fallback again.
<!-- Fallback → patterned image at sm --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) border-image:none font-md bg-surface-base text-body box-border border-image:none@print border-image:url('/demo/border-grid.svg')|24/1|round@screen@sm"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>The class changes the actual border-image shorthand. All layout dimensions and the regular border remain explicit.