# 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; }`

:

## See also

- the `border-image` property
  that is shorthand for a border image
- the `border-image-source` property
  that specifies an image path for a border
- the `border-image-repeat` property
  that sets an image repetition for a border
- the `border-image-width` property
  that sets an image width for a border
- the `border-image-outset` property
  that sets an image outset for a border

← →
↑
en ru