Border-image-repeat - CSS Property

Syntax diagram of border-image-repeat.

Description of the border-image-repeat property.

The border-image-repeat property defines how the border image is repeated or stretched to cover the entire border of the element.

If only one value is specified, it applies to all four borders. If two values are specified, the first one applies to the top and bottom borders; the second value applies to the left and right borders.

Other properties related to image borders.

Values for border-image-repeat.

In all the examples below, the image used to create the border is the following:

• border-image-repeat: stretch;

  Default value. The image is enlarged to cover the entire border area.
• border-image-repeat: repeat;

  The image is repeated to cover the length of the border on each side. The first and last images may be cropped.
• border-image-repeat: round;

  The image is repeated until it covers the length of the border, but without chopping off the images at the ends. The image can be resized to cover the exact length.
• border-image-repeat: space;

  The image is repeated until it covers the length of the border but without cutting off the images at the ends. Spaces can be added between the images to cover the exact length.
• border-image-repeat: repeat stretch;

  When two values are specified, separated by a space, they are interpreted as follows:

  • The first value applies to the top and bottom borders, and to the horizontal stretching of the middle part.
  • The second value applies to the right and left borders, and to the vertical expansion of the central part.

  The two examples below are made with the same border image, but the first one is stretched vertically (value stretch) while the second one is stretched horizontally.

  border-image-repeat:round stretch

  border-image-repeat:stretch round
• border-image-repeat: initial; (stretch) border-image-repeat: inherit; border-image-repeat: revert; border-image-repeat: revert-layer; border-image-repeat: revert-rule; border-image-repeat: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the border-image-repeat property.

The property border-image-repeat doesn't handle numeric values, so its animation jumps from one value to another. The result looks like a store's neon sign.

Access the border-image-repeat property via a program

Changer la répétition de l'image de bordure avec Javascript.

JavaScript accepts two syntaxes for writing the property name:

• With the typical CSS notation: a dash to separate words (kebab-case).
• With the more common notation in JavaScript: a capital letter to separate words (camel-case).

let el = document.getElementById('id'); el.style['border-image-repeat'] = 'round'; // or let el = document.getElementById('id'); el.style.borderImageRepeat = 'round';

Read the border image repeat with JavaScript.

The code below retrieves the value of the property if it has been applied directly to the element via the HTML style attribute, and not through a CSS selector.

let el = document.getElementById('id'); el.style['border-image-repeat'] = 'round'; // or let el = document.getElementById('id'); el.style.borderImageRepeat = 'round';

With Javascript, read the computed value of border-image-repeat.

The computed value comes from evaluating the priority rules and any inheritances (see Priorities). If not, the computed value is the initial value of the property (stretch in the case of border-image-repeat).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('border-image-repeat');

With JQuery, read or change the value of border-image-repeat.

The property name can be written either in kebab-case or in camel-case.


// Read the value:
$('#id').prop('border-image-repeat');
// Write the value:
$('#id').prop('border-image-repeat', 'round');
$('#id').prop('{border-image-repeat': 'round'});


With JQuery, read the computed value of border-image-repeat.

let value = $('#id').css('border-image-repeat');

Other examples.

You can find more examples of Javascript and JQuery code on the page Javascript and CSS.

Test it yourself.

Use the buttons below to see how the property border-image-repeat is stored (serialized). For this property, the assigned value and the computed value will be the same, except if an incorrect value is entered. In that case, the assigned value is empty, while the computed value is the initial value of the property (stretch).

Simulator.

Browsers compatibility with border-image-repeat.

The property border-image-repeat, as well as all properties related to border images, are properly supported by browsers.

Notes:

(1) Supports the summary property but not detailed properties.
Doesn't support the space and round values

1

Using images
for borders

2

border-image-repeat
property

3

round
value

4

space
value

Estimated overall support.

97%

96%

96%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

1

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

Historic of the border-image-repeat property.

• CSS Backgrounds and Borders Module Level 3

  Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
  Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.

  Regarding border-image-repeat Introduction of the border-image-repeat property and more generally borders created with an image.
  

  August 02, 2002

  Working Draft.

  

  December 17, 2009

  Candidate Recommendation.

  

  

See also: other border and background features.

The properties related to borders and backgrounds are described in the CSS Backgrounds and Borders Module specification of the W3C. Here is the list:

Properties: