# border-image-outset property

The `border-image-outset` property allows you to move a border outside an element. The value is a number without specifying units of measurement or any size units, except percentages. If the number without units is specified, then it is a multiplier by which the values ​​of the `border-width` property are multiplied. Negative values ​​are not supported.

For more detailed information about images for a border, see the `border-image` property.

## Syntax

`selector { border-image-outset: positive number; }`

## Example . Number

Let's set the value of `border-image-outset` to `3` when hovering the mouse over the element. In this case, the border will move `26px*3` - `3` times further than its width specified in `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; }`

:

## Example . Pixels

Let's set the value of `border-image-outset` to `30px` when hovering the mouse over the element. In this case, the border will move by `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; }`

:

## 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-slice` property
  that specifies an image split 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

← →
↑
en ru