CSS border-image-outset

The border-image-outset property is used to specify the distance by which a border image moves outside the element's border box. Its shorthand property is border-image.

CSS

border-image-outset: value;

Values

<number> : Allows you to define the distance as a multiple of the corresponding border-width value. The default value is 0.

<length> : Allows you to define the distance in px, em, rem, etc. Negative values are not allowed. The default value is 0.

initial : Sets the default value.

inherit : Inherits the value from parent element.

Example

Have a look at the effect of different border-image-width values on the width of a border image.

HTML

<div id="div2">border-image-outset: 20px</div>

CSS

div {
  width: 400px;
  padding: 10px;
  border: solid 20px;
  border-image-source: url('/path/image.jpg');     
  border-image-slice: 30%;
  border-image-width: 20px;
  border-image-repeat: repeat;
}

#div2 {
  border-image-outset: 20px;
}

See the Pen CSS border-image-outset by Aakhya Singh (@aakhya) on CodePen.

Note: The border-style property must be defined before the border-image-source property to set a border image.

Giving different values for different border sides

You can give four or less than four values to the border-image-outset property. The effect of each of these on border image offset is given below.

Giving four values

The first, second, third and fourth values define the top, right, bottom and left offset respectively.

CSS

border-image-offset: 20px 1 1.5 10px;

For the above declaration

• top offset is 20px
• right offset is 1
• bottom offset is 1.5
• left offset is 10px

Giving three values

The first value defines the top offset and the third value defines the bottom offset. The second value defines the right and left offsets.

CSS

border-image-offset: 20px 10px 1.5;

For the above declaration

• top offset is 20px
• right and left offsets are 10px
• bottom offset is 1.5

Giving two values

The first value defines the top and bottom offsets. The second value defines the right and left offset.

CSS

border-image-offset: 20px 10px;

For the above declaration

• top and bottom offsets are 20px
• right and left offsets are 10px

Giving one value

It defines all the four offsets.

CSS

border-image-offset: 10px;

• all the four offsets are 10px

Look at another demo.

See the Pen CSS border-image-outset by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is not supported in IE 10 and its earlier versions.