# Свойство border-image-slice

Свойство `border-image-slice` указывает браузеру, какие части картинки пойдут на уголки, а какие на стороны (а какая часть будет центральной). На уголки идут `4` части, на стороны идут `4` части и одна часть (центральная) идет на фон элемента (опционально, ключевое слово `fill`).

Для более подробной информации смотрите свойство `border-image`.

## Синтаксис

<+css+> селектор { border-image-slice: от `1`-го до `4`-х чисел | от `1`-го до `4`-х процентов; } <-css->

С числами и процентами через пробел может стоять ключевое слово `fill`.

## Значения

Значение | Описание
--- | ---
проценты | Проценты рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
числа | Числа - это пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются.
`fill` | Поведение по умолчанию предполагает то, что центральная часть изображения будет отброшена. Для того чтобы задействовать ее, необходимо использовать ключевое слово `fill` в дополнение к числам или процентам.

## Количество параметров

Смещение может принимать `1`, `2`, `3` или `4` параметра. Обратите внимание на то, что единицы измерения для смещения не пишутся (например, просто `20`, а не `20px`). Также можно задавать толщину в `%`.

Число параметров | Описание
--- | ---
`1` | Толщина для всех сторон одновременно.
`2` | 1 2; - `1px` для верха и низа, `2px` для левой и правой.
`3` | `1 2 3`; - `1px` для верха, `2px` для левой и правой, `3px` для низа.
`4` | `1 2 3 4`; - `1px` для верха, `2px` для правой, `3px` для низа, `4px` для левой.

Значение по умолчанию: 100%(?).

## Пример

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

:

## Пример

`<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`,
  которое является сокращением для границы-картинки
- свойство `border-image-source`,
  которое задает путь к картинке для границы
- свойство `border-image-repeat`,
  которое повторение картинки для границы
- свойство `border-image-width`,
  которое задает размер картинки для границы
- свойство `border-image-outset`,
  которое задает сдвиг картинки для границы

← →
↑
en ru