Borders & Outlines
border-image-repeat
Defining how border image edge regions fit the border image area.
Overview
| Class | Declarations |
|---|---|
border-image-repeat:stretch | border-image-repeat: stretch;
|
border-image-repeat:repeat | border-image-repeat: repeat;
|
border-image-repeat:round | border-image-repeat: round;
|
border-image-repeat:space | border-image-repeat: space;
|
border-image-repeat:<horizontal>|<vertical> | border-image-repeat: <horizontal> <vertical>;
|
Basic usage
Round repeated edge slices
Use the patterned source to compare all four edge-fitting modes. Corners remain corners; only the middle edge regions stretch or repeat.
Round repeated edge slices
The first repeat value controls top and bottom edges; the second controls left and right. The source pattern makes individual tiles visible.
<!-- Stretch · one stretched tile --><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><!-- Repeat · natural tiles, clipped ends --><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:repeat 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><!-- Round · whole tiles resized to fit --><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:round 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><!-- Space · whole tiles with gaps --><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:space 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>Generated CSS
@layer utilities { .border-image-repeat\:round { border-image-repeat: round }}repeat may clip partial tiles at the ends. round adjusts tile size to fit a whole number. space distributes available space between whole tiles.
Set horizontal and vertical behavior
With two values, the first controls horizontal edges (top and bottom); the second controls vertical edges (left and right).
Set horizontal and vertical behavior
The first repeat value controls top and bottom edges; the second controls left and right. The source pattern makes individual tiles visible.
<!-- Horizontal round · vertical stretch --><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:round|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>round|stretch repeats whole tiles along the top and bottom while stretching one tile down each side. The two-value order differs from width/outset pairs.
Apply conditionally
At sm, switch from stretch to round while preserving source, slices and border dimensions. Print returns to stretch.
Apply conditionally
The first repeat value controls top and bottom edges; the second controls left and right. The source pattern makes individual tiles visible.
<!-- Stretch → round 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-repeat:stretch@print border-image-repeat:round@screen@sm"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>The patterned edges expose the change directly; a smooth gradient would make repetition harder to distinguish.