CSS border-image-slice Property

Description

The border-image-slice is a CSS property used to define how a border image should be sliced and divided into nine regions to be used as a border around an element. This property specifies the inward offsets from the top, right, bottom, and left edges of the border image, effectively defining the size of the corners and edges. By adjusting these values, web developers can create flexible and resizable border designs using a single image, ensuring that the corners and edges scale appropriately to fit the size of the element. This property is particularly useful for creating decorative and visually appealing borders in web design while maintaining responsiveness.

Initial value: 100%
Applies to: All elements
Inherited: No
Computed value: As four values, each a number or percentage, and optionally a 'fill' keyword
Animatable: No
JavaScript syntax: object.style.borderImageSlice

Syntax

border-image-slice: [<number> | <percentage>]{1,4} && fill?

Values

<number>Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is a vector image).
<percentage>Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.
fillThe 'fill' keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)

Example

HTML

<div>Example of the border-image-slice property</div>

CSS

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Result