CSS border-image-outset Property

CSS border-image-outset property specifies how much the border image area should extend beyond the border box.

In simple words, the border-image-outset property sets a distance between element’s border-box and the border image. It can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also accept an absolute number.

Example:

.div1{
  border-image-source: url(images/border-diamonds.png);
  border-image-outset: 15px;
}
.div2{
  border-image-source: url(images/border-diamonds.png);
  border-image-outset: 30px;
}

Specify border-image-outset Using an Absolute Number

The border-image-outset property can also accept an absolute number. Here, the border-image-outset is calculated by multiplying the value specified by the border-width property to the specified absolute number.

For example, if the element has border-width: 30px; and border-image-outset: 0.5;

This means, the border-image-outset will be 0.5*30px = 15px; Refer to the example below:

Example:

div{
  border-image-source: url(images/border-diamonds.png);
  border-width: 30px;
  border-image-outset: 0.5;
}

CSS Syntax

The border-image-outset property has the below syntax:

border-image-outset: length|number|initial|inherit;

Property Values

The border-image-outset property accepts the following values:

lengthSpecifies the distance between element’s border-box and border image in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. The default value is 0.
numberThe border-image-outset is calculated by multiplying the border-width property value to the specified number. The calculated value is in pixels.
initialSets the border-image-outset property to its default value(0).
inheritInherits the border-image-outset property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.borderImageOutset = “30px”;

Related Pages

CSS Tutorial: CSS Borders

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment