border-image-repeat property

Specifies if the sides of the border image are scaled or tiled.

CSS Backgrounds and Borders Module Level 3, Section 6IE11

Syntax

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

Property values

One or two of the following values.

stretch

Initial value. The image is stretched to fill the area between the edges of the border.

repeat

The image is tiled, or repeated, until it fills the area between the edges of the border.

round

The image is tiled, or repeated, until it fills the area between the edges of the border. If the area cannot be filled with a whole number of tiles, the image is rescaled so that a whole number of tiles will fill the area.

space

The image is tiled, or repeated, until it fills the area between the edges of the border. If the area cannot be filled with a whole number of tiles, the extra space is distributed around the tiles.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuestretch

Standards information

Remarks

If two values are specified, the first value is applied to the horizontal sides, and the second value is applied to the vertical sides.

Examples

The following examples show the different property values of border-image-repeat.

This example uses the default value, stretch, for border-image-repeat. This will stretch the image to fill the area between the edges of the border. The corners of the image are preserved at their original size, because the border image is sliced 27 pixels from each side (the same width and height of the green circles). The element will look like the image below.

An HTML element using stretch for the value of border-image-repeat.


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 27;
   border-image-repeat: stretch;
}

The following example will tile, or repeat, the image until it fills the area between the edges of the border.

An HTML element using repeat for the value of border-image-repeat.


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 27;
   border-image-repeat: repeat;
}

This example tiles the image until it fills the area between the edges of the border. The area cannot be filled with a whole number of tiles (see the image above), so the image is rescaled so that a whole number of tiles will fill the area. The element with the above styles will look like the following image.

An HTML element using round for the value of border-image-repeat.


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 27;
   border-image-repeat: round;
}

In this example the image is tiled until it fills the area between the edges of the border. Because the area between the border cannot be filled with a whole number of tiles, the extra space is distributed around the tiles.

An HTML element using space for the value of border-image-repeat.


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 27;
   border-image-repeat: space;
}

Two values can be defined for border-image-repeat. In the example below, the first value, round, is applied to the horizontal sides, and the second value, stretch, is applied to the vertical sides.

An HTML element using round and stretch for the values of border-image-repeat.


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 27;
   border-image-repeat: round stretch;
}

See also

CSSStyleDeclaration
border-image
border-image-outset
border-image-slice
border-image-source
border-image-width

 

 

Show:
© 2014 Microsoft