This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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(http://docs.webplatform.org/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

See also

Related articles

Border

Other articles

Attributions

  • Mozilla Developer Network cc-by-sa-small-wpd.svg: Article