CSS border-image-repeat Property

border-image-repeat specifies how a border image displays.

Possible values are repeat, round, stretch, etc.

Example

#

A border with border-image-repeat set to round.

Element with border image repeat setting
<style>
  .border-image-round {
    border: 30px solid transparent;
    padding: 15px;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100;
    border-image-repeat: round;
  }
</style>

<div class="border-image-round">
  Element with border image repeat setting
</div>

Syntax

border-image-repeat: stretch | repeat | 
                     round | initial | inherit;

Values

#

Value Description
stretch Default. Stretch the image to fill the area
repeat Image is tiled (repeated) to fill the area
round The image is tiled (repeated) to fill the area while rescaling it.
space The image is tiled (repeated) to fill the area while adding whitespaces around it.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-image-repeat values.

Element with border image repeat setting
<style>
  .border-image-stretch {
    border: 20px solid transparent;
    padding: 15px;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100;
    border-image-repeat: stretch;
  }
</style>

<div class="border-image-stretch">
  Element with border image repeat setting
</div>

Browser support

This table shows when border-image-repeat support started for each browser.

Chrome
15.0 Oct 2011
Firefox
15.0 Aug 2012
IE/Edge
11.0 Oct 2013
Opera
15.0 May 2013
Safari
6.0 Jul 2012

You may also like

Guides