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:<vertical>|<horizontal> | border-image-repeat: <vertical> <horizontal>;
|
Basic usage
Round repeated edge slices
Use border-image-repeat to control how the edge slices fit the border image area.
Round repeat
The slices are adjusted so repetitions fit evenly.
<div class="b:16px|solid|transparent border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-slice:30 border-image-repeat:round"> Round repeat</div>Set vertical and horizontal behavior
<div class="b:16px|solid|transparent border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-slice:30 border-image-repeat:round|stretch"> Round vertically, stretch horizontally</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="border-image-repeat:round:hover border-image-repeat:round@sm border-image-repeat:round@dark border-image-repeat:round@print">…</div>