border-image-source
Setting the source image for an element’s border.
Overview
| Class | Declarations |
|---|---|
border-image-source:none | border-image-source: none;
|
border-image-source:<image> | border-image-source: <image>;
|
border-image-source:url(<…>) | border-image-source: url(<…>);
|
border-image-source:linear-gradient(<…>) | border-image-source: linear-gradient(<…>);
|
Basic usage
Set a gradient source
A source can be a gradient or an image file. Both panels keep their own slice, width and repeat settings; only the source changes.
<!-- Gradient · continuous color --><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-repeat:stretch border-image-slice:24 border-image-source:linear-gradient(135deg,#2563eb,#7c3aed) border-image-width: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><!-- SVG · distinct corners and edges --><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-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width: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>The local SVG has a 96 × 96 coordinate grid with 24-unit corner slices. Border images require their other paint prerequisites; choosing a source alone does not define the intended geometry.
Use no source
none removes the image paint and reveals the ordinary border. Compare the same geometry before and after removing the source.
<!-- Image source · patterned border --><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-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width: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><!-- No source · regular blue border --><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-repeat:stretch border-image-slice:24 border-image-source:none border-image-width: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>The blue fallback is authored as b:12px|solid|var(--color-blue-60). Slice and width values remain declared when the source is absent.
Apply conditionally
Widen to sm to replace the gradient with the SVG source. Print uses no image and retains the solid border.
<!-- Gradient → SVG 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-repeat:stretch border-image-slice:24 border-image-source:linear-gradient(135deg,#2563eb,#7c3aed) border-image-width:1 font-md bg-surface-base text-body box-border border-image-source:none@print border-image-source:url('/demo/border-grid.svg')@screen@sm"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>Changing only the source preserves the slice, image width and repeat declarations.