CSS border-image-repeat Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The CSS border-image-repeat property controls how the edge slices of an image used as a border are placed along each side of a box. When you supply an image for a border, that image is divided into corner and edge pieces; this property determines the treatment of the edge pieces as they cover the length of the element’s sides - whether they are tiled, stretched, adjusted to fit an integer number of tiles, or spaced out with gaps. The choice affects the visual continuity of patterns and whether repeating motifs preserve their aspect ratio or become distorted to fill remaining space.

The property operates on the horizontal and vertical axes independently, so the repeat behavior along the top and bottom can differ from the left and right. Corners remain fixed from the slice definitions and are not repeated, but how the edge tiles meet corners - and how partial tiles at the ends are handled - depends on the repeat strategy. When the edge length does not divide evenly by the tile size, browsers either crop a tile, scale tiles slightly, or add even spacing, so the final seam at joins or at corners can look different depending on that choice and the values used for slicing and border sizing.

In practical terms, you use border-image-repeat when you need precise control over repeated patterns versus a continuous stretched look for decorative borders. It is most useful with images designed to tile seamlessly for patterned borders, whereas photographic frames often benefit from a fitting/stretching approach. This property works together with the overall image border setup - for example, the image source and how it’s sliced and sized - so changes to border-image-source, border-image-slice, or border-image-width will change how the repeat behavior appears. If an element falls back to a conventional border, the results will be affected by the element’s regular border settings such as border-style and border-width. Conceptually it shares similarities with background tiling choices (see background-repeat), but it is specifically about how the segmented border image fills the frame around a box.

Definition

Initial value: stretch
Applies to: All elements
Inherited: No
Computed value: Two keywords, one for each axis
Animatable: No
JavaScript syntax: object.style.borderImageRepeat

Interactive Demo

border-image-repeat: stretch;

border-image-repeat: repeat;

border-image-repeat: round;

border-image-repeat: space;

border-image-repeat: round stretch;

Example of the border-image-outset property.

Syntax

border-image-repeat: [ stretch | repeat | round | space ]{1,2}

Values

stretchThe image is stretched to fill the area.
repeatThe image is tiled (repeated) to fill the area.
roundThe image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.
spaceThe image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

Example

HTML

<div class="demo">

    <div class="box stretch">

        <div class="label">border-image-repeat: stretch;</div>

    </div>

    <div class="box repeat">

        <div class="label">border-image-repeat: repeat;</div>

    </div>

    <div class="box round">

        <div class="label">border-image-repeat: round;</div>

    </div>

    <div class="box space">

        <div class="label">border-image-repeat: space;</div>

    </div>

</div>

CSS

/* Layout */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    padding: 24px;
    background: #f5f7fb;
}

.demo {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Box base */
.box {
    width: 220px;
    height: 120px;
    padding: 18px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 16px;
    border-image-source: linear-gradient(90deg, #ff7b7b 0% 25%, #7bdcff 25% 50%, #ffd36b 50% 75%, #b39cff 75% 100%);
    border-image-slice: 30;
    /* border-image-width defaults to the border-width */
    background: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Variants for border-image-repeat */
.stretch { border-image-repeat: stretch; }
.repeat  { border-image-repeat: repeat;  }
.round   { border-image-repeat: round;   }
.space   { border-image-repeat: space;   }

.label {
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 1.2;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-image-repeat property. Hover over a browser icon to see the version that first introduced support for this CSS property.