CSS border-image-slice Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-image-slice property controls how the browser divides the image you provide for a border into the regions that will be used to draw the element’s border and (optionally) its center. Conceptually the image is cut into a grid of nine areas: four corners, four edges, and a center. The slice lines you choose determine which parts of the source image become corners and which become edge strips; that, in turn, strongly affects the visual character of the border (for example, whether decorative corners are preserved or whether an edge texture dominates).

The way those sliced pieces are then painted around the element depends on how you want the edge pieces to behave when the element’s border area is larger or smaller than the image pieces. Corners are typically treated as independent pieces that are placed in the corners, while the edge strips are used to fill the sides between corners - they may be scaled or tiled according to the border-image repeat behavior. For controlling which image is used in the first place and how the edge pieces are filled, this property works together with the image source and repeat-related settings such as border-image-source and border-image-repeat.

Practical rendering also depends on the relationship between the slices and the border metrics of the element. The slices interact with the effective border thickness so that the visual width of the image’s edge areas corresponds to the space available on the element’s sides; that interplay involves the border-image sizing controls and the element’s own border configuration, for example border-image-width and the usual box border controls such as border-width and border-style. If an element has no border style or a style that doesn’t display, the border-image will not be painted regardless of slices.

When designing or authoring images for use with this property, think about the artwork at the slice boundaries: clear corners and continuous edges make the borders look seamless when scaled or tiled. The slice placement also influences whether the image’s interior area is available for filling the element’s background area or whether it’s excluded from the border rendering - so planning the graphic with the intended slicing behavior in mind avoids unexpected cropping, distortion, or stretched edge artifacts.

Definition

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

Interactive Demo

border-image-slice: 30;

border-image-slice: 30 fill;

border-image-slice: 44;

Example of the border-image-outset property.

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

Editor

Browser Support

The following information will show you the current browser support for the CSS border-image-slice property. Hover over a browser icon to see the version that first introduced support for this CSS property.