# border-image property

The `border-image` property specifies an image for a border, it is a shorthand property for the `border-image-source`, `border-image-slice`, `border-image-repeat`, `border-image-width` and `border-image-outset` properties. However, the shorthand property was introduced in CSS before shorthand properties at all and is therefore supported in more older browsers.

## Syntax

`selector { border-image: url(path to image) slice/width/outset repeat; }`

## Description

An image we want to use for the border must be designed in a special way: `4` small images for the corners and `4` images for the sides. An example of such an image:

In this case, the central part is left white (since we don't want it to fall into the element background). An example of the image with a filled central part:

The `slice` value tells the browser which parts of an image will go to the corners and which to the sides (and which part will be the center). `4` parts go to the corners, `4` parts go to the sides and one part (central) goes to the element background (optional, the `fill` keyword).

The image is “cut” into pieces as follows: for the `slice` value, from one to four values ​​are indicated. Let's look at it with an example. Let the following values ​​be specified: `10 20 30 40` (pixels `px` are not specified, this is due to the fact that the image can be both raster and vector). The values ​​indicate the following: `10` cut from the top, `20` cut from the right, `30` cut from the bottom, `40` cut from the left. What part of the image will fall into the top left corner? This will be a piece: `10` from the top, `40` from the left. The top right corner will contain `10` from the top, `20` from the right. And so on.

Most often the image is symmetrical (like the diamonds above) and we need to cut equal pieces into corners. In this case, one value is specified, which will set the same slices on all sides. To cut the orange diamonds, we'll set `slice` to `26` (since the orange diamond is `26px` by `26px`). Yellow diamonds will fall on the border lines and the following will happen to them: they will either stretch across the entire block or repeat along the border (depending on the `repeat` value):

`<div id="elem"></div>` `#elem { border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: stretch; 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; }`

:

The `border-image` property does not allow you to specify the width of an element's border. The browser simply stretches the image along the border with the existing width. Therefore, it must be set via the `border` property.

Users of older browsers (or with disabled images) will see a standard border set in `border`, so it makes sense to give it a suitable style and color.

## Values

Value | Description
--- | ---
url(Path to image) | Path to image. For more details, see `border-image-source`.
slice | Tells the browser which parts of the image will go to the corners and which to the sides (and which part will be the center). Possible values: from `1` to `4` numbers | from `1` to `4` percents. The `fill` keyword can be separated by spaces in addition to numbers or percentages. For more details, see `border-image-slice`.
width | The property controls the width of the visible part of the border and scales it. If this value is greater than the `border-width`, the border image will go under the content. Possible values: CSS units | percentage | | number | `auto`. For more details, see `border-image-width`.
outset | An interesting property that allows you to move the border outside the element. Negative values ​​are not supported. Possible values: CSS units (except % (?)) | positive number | auto. For more details, see `border-image-outset`.
repeat | Indicates how to repeat an image on the borders (not on the corners): tile or stretch. Possible values: `stretch` | `repeat` | `round` | `space`. For more details, see `border-image-repeat`.

Default value: `none 100%/1/0 stretch` (url(path to image) slice/width/outset repeat).

## Example . border-image-repeat: repeat

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

:

## Example . border-image-repeat: stretch

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

:

## Example . border-image-repeat: round

Now in the normal state the value is set to `repeat`, and on hover - `round`. Please note that before hovering, not a whole number of diamonds are placed in the border, but after hovering - a whole number. This is how `round` works:

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

:

## Example . border-image-repeat: two values

The `repeat` value for width and `stretch` for height:

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

:

## Example . Matching the image width with the border width

Let's increase `border-width` on mouse hover, while leaving the `border-image` width the same. Diamonds will stretch across the entire border:

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

:

## Example . border-image-slice

Let's take another image in which different pieces are not equal:

We will indicate which parts of the image need to be cut off - `25% 30% 10% 20%`. It works like this: `25%` - top indent, `30%` - right indent, `10%` - bottom indent, `20%` - left indent. Essentially, we cut off the corners with these pieces. The top left corner will be `25%` from the top of the image, and `20%` from the left. The top right corner will be `25%` from the top of the image, and `30%` from the right, and so on.

Also, if you hover your mouse over a block, the `fill` keyword will work, and the central part of the image will become the background of our block:

`<div id="elem"></div>` `#elem:hover { border-image: url("image.png") fill 25% 30% 10% 20% stretch; } #elem { border-style: solid; border-width: 52px; border-image: url("image.png") 25% 30% 10% 20% stretch; width: 200px; height: 200px; margin: 0 auto; }`

:

## Example

Let's make a gradient border using linear gradient:

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

:

## Example . border-image-width

Set the value of `border-image-width` to `2` (the border image will become `2` times larger than the border itself) when hovering the mouse over the element (`26/2` - indicated after the slash, while `26` is the value of `border-image-slice`). Please note that the border itself has not increased, but the border image has, since it will go under the text:

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

:

## Example . border-image-outset

Let's set the `border-image-outset` value to `3` when hovering over the element. (`26/1/2` - indicated after the second slash, while `26` is the value of `border-image-slice`, and - `1` is `border-image-width`):

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

:

## See also

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

← →
↑
en ru