CSS Property border-image-slice

The border-image-slice property is employed to “slice” the image that is to be used as a border image into 9 pieces: four corners, four edges, and one center piece.

The size of the 9 items is set supported the highest, right, bottom, and left offsets of 4 imagined lines that square measure offsetted inwards from the sides of the part. The offsets are often given victimisation absolute values or values. The four offsets don’t got to be equal.

The border-image-slice property will take four, three, two, or one offset values.

When four values square measure given, they set the offsets on the highest, right, bottom and left sides therein order. If 3 values square measure given, the primary one specifies the highest offset, the other specifies the correct and left offsets, and also the third one specifies very cheap offset. If 2 values square measure given, the primary one specifies the highest and bottom offsets, and also the other specifies the correct and left offsets. If one price is given, it specifies all the four offsets.

The corner items of the sliced image are {going to be|are} placed at the corners of the part to that it’s going to be applied. the sides of the sliced pictures are placed on the sides of the part. The border-image-repeat property specifies however the image edges are applied to the element’s edges. the dimensions of those slices and position is given victimisation the border-image-width and border-image-outset properties. you’ll be able to browse a lot of concerning however these properties work along within the border-image shorthand property entry.

The middle image half is discarded (treated as absolutely transparent) unless the fill keyword is gift within the border-image-slice property. If the fill keyword is gift, the center piece of the border image is employed as a background image to the part. The fill keyword are often placed anyplace within the declaration of the border-image-slice property (before, after, or perhaps between the opposite values).

The regions given by the border-image-slice values might overlap. However, if the total of the correct and left dimensions is capable or larger than the width of the image, the photographs for the highest and bottom edge and also the middle half square measure empty, that has identical result as if a nonempty clear image had been given for those elements. Same is applied for the highest and bottom values.

Desktop Browser Support

Mobile Browser Support


border-image-slice: 20 fill; /* number is set without units. If the image used is a raster image, it will be considered a pixel value */
border-image-slice: 30% 25%;
border-image-slice: fill 125 50 125;

One comment

  1. I truly enjoy reading on this web site, it has got good blog posts.

Leave a Reply