Earn income with your CSS skills

Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

CSS border-image-repeat Property

CSS border-image-outset

CSS border-image-slice

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>

border-image-outset

border-image-slice

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

#