W3cubDocs

/CSS

border-image-repeat

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

Initial value stretch
Applies to all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inherited no
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

/* border-image-repeat: type */
border-image-repeat: stretch;

/* border-image-repeat: horizontal vertical */
border-image-repeat: round stretch;

/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

Values

type
One of the stretch, repeat, or round keywords denoting how the image is treated both horizontally and vertically.
horizontal
One of the stretch, repeat, or round keywords denoting how the image is treated horizontally.
vertical
One of the stretch, repeat, or round keywords denoting how the image is treated vertically.
stretch
Keyword indicating that the image must be stretched to fill the gap between the two borders.
repeat
Keyword indicating that the image must be repeated until it fills the gap between the two borders.
round
Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.
space
The 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.

Formal syntax

[ stretch | repeat | round | space ]{1,2}

Example

CSS content

#borderImageRepetition {
  width: 260px;
  height: 80px;
  margin-bottom: 10px;
  border: 30px solid;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
  border-image-repeat: stretch; /* Can be changed in the live sample */
}

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image-repeat' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 15.0 (15.0) 11 15 6
round 30[3] 15.0 (15.0) 11 ? 9.1[4]
space 56[1] 50.0 (50.0)[2] 11 No support 9.1[4]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 15.0 (15.0) No support ? 9.3[4]
round ? 15.0 (15.0) ? ? ?
space ? 50.0 (50.0)[2] ? ? ?

[1] Supports the space value, but the actual effect is the same as the repeat value. See Chromium bug 584916.

[2] Implemented in bug 720531.

[3] See Chromium bug 169254.

[4] See WebKit bug 14185.

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat