border-image-slice CSS property divides the image specified by
border-image-source in nine regions: four corners, four edges, and a middle. It does this by specifying 4 inwards offsets that typically creates a three by three grid.
The middle part of the border image is discarded and not used by the border itself but is used as a
background-image if the
fill keyword is present.
The following table summarizes the usages context and the version history of this property.
|Applies to:||All elements, except internal table elements when
|Animatable:||No. See animatable properties.|
|Version:||New in CSS3|
The syntax of the property is given with:
The example below shows the
border-image-slice property in action.
ExampleTry this code »
border: 15px solid transparent;
The following table describes the values of this property.
|number||Represents distance in pixels of the image for raster images, or vector coordinates for vector images.|
|percentage||Relative to the size of the image: the width of the image for horizontal offsets, the height of the image for vertical offsets.|
||If present, preserves the middle portion of the image. Otherwise, the middle is treated as transparent.|
||Sets this property to its default value.|
||If specified, the associated element takes the computed value of its parent element
border-image-slice property is supported in all major modern browsers.