The 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

cssselector {
  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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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