border-image-repeat

Summary

The border-image-repeat CSS property defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.

Overview table

Initial value: stretch
Applies to: all elements, except table elements when border-collapse is collapse
Inherited: No
Media: visual
Computed value: as specified
Animatable: No
CSS Object Model Property: borderImageRepeat
Percentages: N/A

Syntax

border-image-repeat: inherit
border-image-repeat: repeat
border-image-repeat: round
border-image-repeat: space
border-image-repeat: stretch

Values

stretch: Is a keyword indicating that the image will be stretched to fit the gap between the borders.
repeat: Is a keyword indicating that the image will be repeated until it fit the gap between the borders
round: Is a keyword indicating that the image will be repeated until it fit the gap between the borders. If it doesn’t fit after having being repeated an integer number of times, it is rescaled to do so.
space: Is a keyword indicating that the image will be repeated until it fit the gap between the borders. If it doesn’t fit after having being repeated a whole number of times, the white space is distributed around the tiles.
inherit: Is a keyword indicating that all four values are inherited from their parent’s element calculated value.

Examples

A simple example showing multiple <div>s, identical in style except that they have different border-image-repeat properties applied to them.

<div class="pattern repeat">Repeat</div>
<div class="pattern stretch">Stretch</div>
<div class="pattern round">Round</div>
<div class="pattern space">Space</div>

View live example

/* This general class will apply the pattern to the containers */
.pattern {
    border-image-source: url(/docs/w/images/d/d8/border-image.png);
    border-image-slice: 30;
    border-image-width: 6;
    border-image-outset: 3;
}

/* Repeat Pattern */
.pattern.repeat{
    border-image-repeat: repeat;
}

/* Stretch Pattern */
.pattern.stretch{
    border-image-repeat: stretch;
}

/* Round Pattern
   Currently available on Gecko browsers (eg: Firefox) */
.pattern.round{
    border-image-repeat: round;
}

/* Space Repeat Setting
   Currently unavailable on all browsers */
.pattern.space{
    border-image-repeat: space;
}

View live example

[[File:border-image.png|border-image demo image]]

<code>border-image-repeat: stretch;</code>
[[File:bi-stretch.png|border-image stretch demo]]

<code>border-image-repeat: repeat;</code>
[[File:bi-repeat.png|border-image repeat demo]]

<code>border-image-repeat: round;</code>
[[File:bi-round.png|border-image round demo]]
/* Round is supported by Gecko-based browsers only, like Firefox */

<code>border-image-repeat: space;</code>
[[File:bi-space.png|border-image space demo]]

/* Space is not supported by any browser */

Usage

 If one velue is specified, it is used for all four sides. If two values are specified, the first is used for the horizontal sides, and the second is used for vertical ones.

Related specifications

CSS Level 3 - Backgrounds and Borders Module: W3C Candidate Recommendation

Attributions

Mozilla Developer Network : Article