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

Свойство `border-image-outset` позволяет отодвинуть рамку за пределы элемента. В качестве значения указывается число без указания единиц измерения либо любые единицы для размеров, кроме процентов. Если указано число без единиц, то оно является множителем, на который умножается значения свойства `border-width`. Отрицательные значения не поддерживаются.

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

## Синтаксис

`селектор { border-image-outset: положительное число; }`

## Пример . Число

Установим значение `border-image-outset` в `3` по наведению мышкой на элемент. При этом граница сдвинется на `26px*3` - в `3` раза дальше, чем ее ширина, заданная в `border-width`:

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

:

## Пример . Пиксели

Установим значение `border-image-outset` в `30px` по наведению мышкой на элемент. При этом граница сдвинется на `30px`:

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

:

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

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

←→
↑