Search within TutorialsPark

CSS3 border-image-repeat Property


To specify the repeat style for the border image


Definition and Notes.

1. The CSS border-image-repeat property is used a model by which the image is used to fill the border areas.

2. Border Image slices are stretched inorder to fill the gap in between the corners of the frames .


Syntax:

CSS border-image-repeat property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note: Incase the image is wider or taller than the border area, its clipped by default.

Property Values

Value Description
stretch The slices are scaled along the axis to fill the gap.
repeat The image is tiled from the center of the side to fill the gap.
round The image is rescaled if necessary to fil the gap an exact number of times.
space The slice is repeated without creating fragments.Any remaining space is distributed around the slice

Specifications

Specs Value
Name border-image-repeat
Value [stretch | repeat | round] {1,2}
Initial Value stretch
Applies to All elements except table element where border-collapse is collapse
Javascript syntax object.style.borderImageRepeat="round"
Inherited No
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.