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.
|All elements, except internal table elements when
collapse. It also applies to
|No. See animatable properties.
|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.
|Represents distance in pixels of the image for raster images, or vector coordinates for vector images.
|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.