border-image-slice property

The border-image-slice property tells the browser which parts of an image will go to the corners and which to the sides (and which part will be the center). 4 parts go to the corners, 4 parts go to the sides and one part (central) goes to the background of an element (optional, the fill keyword).

For more details, see border-image property.

Syntax

<+css+> selector { border-image-slice: from 1 to 4 numbers | from 1 to 4 percent; } <-css->

With numbers and percentages, the fill keyword can be separated by a space.

Values

Value	Description
percentages	Percentages are calculated relative to an image size. Horizontal relative to width, vertical relative to height.
numbers	The numbers are pixels (for a raster image) or coordinates (for a vector image). Units of measurement are not specified.
`fill`	The default behavior is that the center portion of an image will be discarded. To use it, you must use the `fill` keyword in addition to numbers or percentages.

Number of parameters

The property can take 1, 2, 3 or 4 parameters. Note that units are not written (for example, just 20, not 20px). You can also set a width in %.

Number of parameters	Description
`1`	Width for all sides at the same time.
`2`	1 2; - `1px` for top and bottom, `2px` for left and right.
`3`	`1 2 3`; - `1px` for top, `2px` for left and right, `3px` for bottom.
`4`	`1 2 3 4`; - `1px` for top, `2px` for right, `3px` for bottom, `4px` for left.

Default value: 100%(?).

Example

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Example

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

border-image-slice property

Syntax

Values

Number of parameters

Example

Example

See also