CSS Property border-image-repeat

The border-image-repeat property specifies however the slices of a picture used as a border image square measure scaled and covered.

If the center a part of the border image are often used as a background image for the component looking on the worth of border-image-slice. The facet pictures (edges of the border image) square measure placed on the perimeters of the component.

The border-image-repeat property specifies however the pictures for the perimeters (Edges one through four within the image above) and also the middle a part of the border image (center within the image above) square measure scaled and covered.
The images are often set to repeat over the border and background areas, severally, or are often set to stretch to fill those areas.

The border-image-repeat takes one keyword as a price or 2 keywords—the 1st keyword applies to the horizontal sides (top and bottom), the second to the vertical ones (right and left). If the second keyword is absent, it’s assumed to be a similar because the 1st.

CSS Property border-image-repeat Value

  • stretch
  • repeat
  • round
  • space

stretch

The image is stretched to fill the world. this can be the default price. If this can be the primary keyword, then the highest, center, and bottom border image tiles are going to be stretched horizontally to suit the whole space. If this can be the second keyword, then the left, center, and right border image tiles are going to be stretched vertically to suit the whole space.

repeat

The image is covered to fill the world. If this keyword is employed because the initial keyword, then the highest, center, and bottom border image tiles are focused horizontally in their individual areas, and perennial the maximum amount as necessary to fill the world horizontally. If this keyword is employed because the second keyword, the left, center, and right square measure focused vertically in their individual areas, and so perennial the maximum amount as necessary to fill the world.

round

Similar to the repeat worth, the image is covered (repeated) to fill the realm identical approach. solely distinction is that if it doesn’t fill the realm with an entire range of tiles, the image is rescaled so it will.

space

Similar to the repeat price, the image is covered (repeated) to fill the world identical manner. solely distinction is that if it doesn’t fill the world with an entire variety of tiles, the additional house is distributed round the tiles.

Desktop Browser Support

Mobile Browser Support

Examples

border-image-repeat: stretch round;
border-image-repeat: repeat;
border-image-repeat: round space;
border-image-repeat: space;

One comment

  1. Some genuinely howling work on behalf of the owner of this site, absolutely outstanding written content.

Leave a Reply