CSS border-image-slice Property

CSS border-image-slice property specifies how the image should be sliced that is to be used as an element’s border.

The specified image is always sliced into 9 sections: four corners, four edges, and one middle section. The size of these 9 sections is determined by the top, right, bottom, and left offset values. The values of the four offsets don’t have to be the same. Refer to the image below:

CSS border-image-slice Property

The middle section is generally discarded unless the fill keyword is present.

The border-image-slice property can take 1 to 4 values at a time. These values specify the size of the four offsets. The size of these offsets can be specified using an absolute number or percentage(%).

If only one value is specified:

  • border-image-slice: val;

The same value(val) will be used for all four offsets(i.e. top, right, bottom and left). Refer to the example below:

Example:

div{
  border-image-source: url(images/border-diamonds.png);
  border-image-slice: 30;
}

If two values are specified:

  • border-image-slice: val1 val2;

The first value(val1) specifies the top and bottom offsets and the second value(val2) specifies the left and right offsets. Refer to the example below:

Example:

div{
  border-image-source: url(images/border-diamonds.png);
  border-image-slice: 30 44;
}

If three values are specified:

  • border-image-slice: val1 val2 val3;

The first value(val1) specifies the top offset, the second value(val2) specifies the left and right offsets and the third value(val3) specifies the bottom offset. Refer to the example below:

Example:

div{
  border-image-source: url(images/border-diamonds.png);
  border-image-slice: 30 44 35;
}

If all four values are specified:

  • border-image-slice: val1 val2 val3 val4;

The first value(val1) specifies the top offset, the second value(val2) specifies the right offset, the third value(val3) specifies the bottom offset and the fourth value(val4) specifies the left offset. Refer to the example below:

Example:

div{
  border-image-source: url(images/border-diamonds.png);
  border-image-slice: 30 44 35 0;
}

Using the fill Keyword

In all the above examples, the middle section of the image was discarded, only the corners and edges were used for the border.

But, if we don’t want the middle section to get discarded, we can use the fill keyword. If the fill keyword is present, the middle section of the image will be used as element’s background. Refer to the example below:

Example:

div{
  border-image-source: url(images/border-diamonds.png);
  border-image-slice: 30 fill;
}

CSS Syntax

The border-image-slice property has the below syntax:

border-image-slice: number|%|fill|initial|inherit;

Property Values

The border-image-slice property accepts the following values:

numberSpecifies the size of each offset. It basically represents the pixels for raster images and coordinates for vector images. Negative values are not allowed.
%Specifies the size of offsets in percentage(%). The default value is 100%.
fillSpecifies that the middle section of the image will also be displayed(By default, it is discarded). However, the middle section is displayed as the element’s background, not the border.
initialSets the border-image-slice property to its default value(100%).
inheritInherits the border-image-slice property from the parent element.

General Info

Default Value100%
InheritedNo
JavaScript Usageelement.style.borderImageSlice = “33”;

Related Pages

CSS Tutorial: CSS Borders

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment