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;
border-image-repeat

style > framing > border-image-repeatCustom border corner-to-corner rule

🔎