Borders & Outlines
border-image-slice
Dividing a border image source into corner, edge, and center regions.
Overview
| Class | Declarations |
|---|---|
border-image-slice:<number> | border-image-slice: <number>;
|
border-image-slice:<percentage> | border-image-slice: <percentage>;
|
border-image-slice:<vertical>|<horizontal> | border-image-slice: <vertical> <horizontal>;
|
border-image-slice:<top>|<horizontal>|<bottom> | border-image-slice: <top> <horizontal> <bottom>;
|
border-image-slice:<top>|<right>|<bottom>|<left> | border-image-slice: <top> <right> <bottom> <left>;
|
border-image-slice:<number>|fill | border-image-slice: <number> fill;
|
Basic usage
Slice the source image
The source below is 96 × 96, with corners that end at coordinate 24. Compare unitless 24 with 25%: they select the same boundaries in this image.
Slice the source image
The 96 × 96 source uses 24-unit corners. Slice boundaries belong to the source; painted widths belong to the destination border.
<!-- 24 source units · 12px border paint --><img src="/demo/border-grid.svg" width="96" height="96" alt="96 × 96 source with 24-unit violet corners" class="block mb-md" /><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><!-- 25% of 96 · same slice --><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:25% 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>Generated CSS
@layer utilities { .border-image-slice\:24 { border-image-slice: 24 } .border-image-slice\:25\% { border-image-slice: 25% }}Slice values cut the source image; they do not set the painted border width. Unitless values use source coordinates for this SVG. Percentages refer to the source dimensions.
Preserve the center with fill
The center is discarded by default. Adding fill paints its pale blue region beneath the content; the label keeps an opaque background so it remains readable.
Preserve the center with fill
The 96 × 96 source uses 24-unit corners. Slice boundaries belong to the source; painted widths belong to the destination border.
<!-- Center discarded · normal surface --><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><!-- Fill · center painted --><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|fill 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 center is additional background paint. The corners, edge width and layout box stay the same.
Apply conditionally
At sm, include the source center with fill. Print drops the center while keeping the border image.
Apply conditionally
The 96 × 96 source uses 24-unit corners. Slice boundaries belong to the source; painted widths belong to the destination border.
<!-- Discarded → filled center 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:url('/demo/border-grid.svg') border-image-width:1 font-md bg-surface-base text-body box-border border-image-slice:24@print border-image-slice:24|fill@screen@sm"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>The readout preserves fill as part of the actual slice value. The viewport control triggers a real media condition.