border-image-slice

Definition

The border-image-slice property in CSS specifies how an image should be sliced into pieces to form a border. It is used in conjunction with the border-image-source property, which specifies the image to use for the border, and the border-image-repeat property, which specifies how the image should be repeated or stretched to fill the border area.

Examples

Slice the image into 10px-wide pieces:

border-image-slice: 10px;

Slice the image into pieces that are 10% and 20% of the image size:

border-image-slice: 10% 20%;

Slice the image into pieces that are 10px, 20px, and 30px wide in the top, horizontal, and bottom directions:

border-image-slice: 10px 20px 30px;

Slice the image into pieces that are 10px, 20px, 30px, and 40px wide in the top, right, bottom, and left directions:

border-image-slice: 10px 20px 30px 40px;

Values

Best Practices

• Use the border-image-slice property to slice the image into pieces that will be used to form the border of an element. The pieces are placed along the edges of the element, and the remaining area is filled with the image, as specified by the border-image-repeat property.
• Specify the width of the slices in pixels or as a percentage of the image size. For example: border-image-slice: 10px; or border-image-slice: 10%;
• Use the border-image-slice property in conjunction with the border-image-source property, which specifies the image to use for the border, and the border-image-repeat property, which specifies how the image should be repeated or stretched to fill the border area.
• If you want to create a border with a solid color or gradient, you can use a 1x1 pixel image as the border image and use the border-image-slice property to slice it into pieces that form the border.
• If you're using a small image or pattern as the border image, you may want to use the repeat value for the border-image-repeat property to tile the image to fill the border area.
• If you're using a large image as the border image, you may want to use the stretch value for the border-image-repeat property to ensure that the image fills the entire border area.
• Keep in mind that the border-image-slice property only works when used with the border-image-source property, which specifies the image to use for the border, and the border-image-repeat property, which specifies how the image should be repeated or stretched to fill the border area.

Browser Compatibility

Note that support for the border-image-slice property is limited in Internet Explorer 10 and earlier.