CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

CSS3 border-image-repeat Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The border-image-repeat CSS property specifies how the middle part of the border image are scaled or tiled so that it can match the size of the border.

The following table summarizes the usages context and the version history of this property.

Default value: stretch
Applies to: All elements, except internal table elements when
border-collapse is collapse. It also applies to ::first-letter.
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

border-image-repeat: 
[ stretch | repeat | round | space ] 1 or 2 values | initial | inherit

The example below shows the border-image-repeat property in action.

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    border-image-source: url("border.png");
    border-image-slice: 30;
    border-image-repeat: round;
}

Property Values

The following table describes the values of this property.

Value Description
stretch The image is stretched to fill the area between the edges of the border. This is default value.
repeat The image is tiled, or repeated, until it fills the area between the edges of the border.
round The image is tiled, or repeated, until it fills the area between the edges of the border. If the area cannot be filled with a whole number of tiles, the image is rescaled so that it does.
space The image is tiled, or repeated, until it fills the area between the edges of the border. If the area cannot be filled with a whole number of tiles, the extra space is distributed around the tiles.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element border-image-repeat property.

Browser Compatibility

The border-image-repeat property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 15+
  • Google Chrome 15+
  • Internet Explorer 11+
  • Apple Safari 6+
  • Opera 15+

Further Reading

See tutorial on: CSS Border, CSS Border.

Related properties: border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties