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

Свойство `border-image-source` задает картинку для границы. Для более подробной информации смотрите свойство `border-image`.

## Синтаксис

`селектор { border-image-source: url(путь к картинке); }`

## Пример

Свойство `border-image-source` следует задавать вместе с `border-image-slice`:

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

:

## Пример

Если не задано свойство `border-image-slice`, вся картинка попадет на уголки (так как `border-image-slice` по умолчанию имеет значение `100%`):

`<div id="elem"></div>` `#elem { border-image-source: url("image.png"); border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример

Вместо картинки можно задавать линейный градиент:

`<div id="elem"></div>` `#elem { border-image-source: linear-gradient(to bottom, red, blue); border-image-slice: 30; border-width: 30px; border-style: solid; background: green; height: 200px; width: 200px; margin: 0 auto; }`

:

## Пример

Если не задано свойство `border-image-slice`, градиент попадет на уголки (так как `border-image-slice` по умолчанию имеет значение `100%`):

`<div id="elem"></div>` `#elem { border-image-source: linear-gradient(to bottom, red, blue); border-width: 30px; border-style: solid; background: green; height: 200px; width: 200px; margin: 0 auto; }`

:

## Пример

Если задать свойство `border-radius`, то скругления границы, к сожалению, не произойдет (и в случае с градиентом тоже), хотя эффект тоже будет довольно интересным:

`<div id="elem"></div>` `#elem { border-radius: 100px; 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; }`

:

## Смотрите также

- свойство `border-image`,
  которое является сокращением для границы-картинки
- свойство `border-image-source`,
  которое задает путь к картинке для границы
- свойство `border-image-slice`,
  которое разбиение картинки для границы
- свойство `border-image-repeat`,
  которое повторение картинки для границы
- свойство `border-image-width`,
  которое задает размер картинки для границы
- свойство `border-image-outset`,
  которое задает сдвиг картинки для границы

←→
↑