Os nossos voluntários ainda não traduziram este artigo para Português (Europeu). Junte-se a nós e ajude-nos a fazer o trabalho!
Pode também ler o artigo em English (US).

The border-image-repeat CSS property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.

Syntax

/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

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

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

The border-image-repeat property may be specified using one or two values chosen from the list of values below.

  • When one value is specified, it applies the same behavior on all four sides.
  • When two values are specified, the first applies to the top and bottom, the second to the left and right.

Values

stretch
The source image's edge regions are stretched to fill the gap between each border.
repeat
The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.
round
The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.
space
The source image's edge regions are tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.

Formal syntax

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

Example

CSS

#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px 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
Initial valuestretch
Applies toall elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 15Edge Full support 12Firefox Full support 15IE Full support 11Opera Full support 15Safari Full support 6WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 15Opera Android ? Safari iOS Full support 9.3Samsung Internet Android ?
roundChrome Full support 30Edge Full support 12Firefox Full support 15IE Full support 11Opera ? Safari Full support 9.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 15Opera Android ? Safari iOS ? Samsung Internet Android ?
spaceChrome Full support 56Edge Full support 12Firefox Full support 50IE Full support 11Opera No support NoSafari Full support 9.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 50Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

Etiquetas do documento e contribuidores

Última atualização por: connorshea,