# border-image-source property

The `border-image-source` property specifies a border image. For more details, see `border-image` property.

## Syntax

`selector { border-image-source: url(path to an image); }`

## Example

The `border-image-source` property should be set together with `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; }`

:

## Example

If the `border-image-slice` property is not set, the entire image will end up in the corners (since `border-image-slice` defaults to `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; }`

:

## Example

Instead of an image, you can set linear gradient:

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

:

## Example

If the `border-image-slice` property is not set, the gradient will fall on the corners (since `border-image-slice` defaults to `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; }`

:

## Example

If you set the `border-radius` property, then, unfortunately, the border will not be rounded (and in the case of a gradient too), although the effect will also be quite interesting:

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

:

## See also

- the `border-image` property
  that is shorthand for a border image
- 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
- the `border-image-outset` property
  that sets an image outset for a border

← →
↑
en ru