/    Sign up×
Reference /Pin to ProfileBookmark

border-image-repeat

Specifies if the border image should be set to be rounded, repeating, spaced or stretched.

Syntax

The border-image-repeat can be set to one of the stretch, repeat, round or space values. Two values can also be used if we want to have different values set respectively for the horizontal and vertical border-image-repeat properties.

/* One value set, applied both horizontally and vertically: */
border-image-repeat: space;
/* Two values set:
stretch for the horizontal borders,
round for the vertical borders */ 
border-image-repeat: stretch round;

Values

stretch
The image used as a border-image-source will be stretched to fill the space between each corner of the element.

repeat
The source image will be repeated in a tiling pattern to fill the space between the corners of the element. The last repetition of the image might be clipped in order to leave no gap.

round
Similar to repeat, the source image will be repeated in a tile pattern to fill the space between the corners of the element. The difference is that instead of clipping the last repetition, all repetitions will be slightly stretched to achieve a perfect fit.

space
Similar to repeat, the source image will be repeated in a tiling pattern to fill the space between the corners of the element. The difference is that instead of clipping the last tile, the remaining space will be equally distributed in gaps between the previous tiles, so that the first and last tiles start and end exactly on the corners of the element.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-image-repeat? Submit a codepen.io demo and we'll showcase it here

to submit a demo.
CSS
×

Success!

Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...