Custom border corner-to-corner rule
border-image-repeat
Specify how the borders of a custom image are stretched or repeated to extend from corner to corner.
Property values
This property defines how to draw the four edge lines of a border image so that they do not leave a gap near the far corner when the length of the image region does not evenly divide the border's length.
Specify one of these keyword values:
| stretch | The edge regions created with border-image-slice are stretched from corner to corner |
| repeat | The edge regions created with border-image-slice are tiled from corner to corner with any remainder clipped |
| round | The edge regions created with border-image-slice are tiled from corner to corner with stretching to achieve a perfect fit |
| space | The edge regions created with border-image-slice are tiled from corner to corner with any unfilled region distributed equally between the tiles |
This property expects anywhere from one to four values, with their interpretation as follows:
| number of values | sides effected |
|---|---|
| 1 value | Sets all four sides: top, right, bottom, left |
| 2 values | 1st value: top and bottom edges 2nd value: right and left edges |
| 3 values | 1st value: top edge 2nd value: right and left edges 3rd value: bottom edge |
| 4 values | 1st value: top edge 2nd value: right edge 3rd value: bottom edge 4th value: left edge |
Examples
/* Top and bottom are tiled with clipping */
/* Left and right are tiled with space between */
border-image-repeat: repeat space;