CSS border-image-outset Property

CSS border-image-outset

The border-image-outset property in CSS specifies the amount by which the border image area extends beyond the border box. You can use length or number values to define how far the image border extends outward.

Syntax of border-image-outset

</>

Copy

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

Values

Value	Description
`length`	Specifies the amount (in any valid length unit like `px`, `em`, etc.) by which the border image area extends outward.
`number`	Multiplies the border-width value to calculate the extent of the border image.
`initial`	Sets the property to its default value (`0`).
`inherit`	Inherits the value from its parent element.

Default Value

0

Examples for border-image-outset

Using the CSS border-image-outset Property

The following examples demonstrate how to use the border-image-outset property with different values.

</>

Copy

/* Extend the border image area by 10px */
.element {
  border-image-outset: 10px;
}

/* Extend the border image area by 1.5 times the border width */
.element {
  border-image-outset: 1.5;
}

/* Set different outsets for each side (top, right, bottom, left) */
.element {
  border-image-outset: 10px 20px 15px 5px;
}

/* Use the initial value */
.element {
  border-image-outset: initial;
}

/* Inherit the value from the parent element */
.element {
  border-image-outset: inherit;
}

Example with Border Image and Outset

Below is an example demonstrating how to use border-image-outset with a border image:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    padding: 50px;
  }
  .highlight {
    border: 20px solid transparent;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: space;
    border-image-slice: 83;
    border-image-width: 28px;
    border-image-outset: 10px;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Example with Border Image and Outset of 1.5

border-image-outset: 1.5;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    padding: 50px;
  }
  .highlight {
    border: 20px solid transparent;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: space;
    border-image-slice: 83;
    border-image-width: 28px;
    border-image-outset: 1.5;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Example with Border Image and Different Outsets for top, right, bottom, and left

border-image-outset: 2 1.5 1 3;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    padding: 50px;
  }
  .highlight {
    border: 20px solid transparent;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: space;
    border-image-slice: 83;
    border-image-width: 28px;
    border-image-outset: 2 1.5 1 3;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Browser Support

The border-image-outset property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	15.0
Edge	11.0
Firefox	15.0
Safari	6.0
Opera	15.0

TutorialKart

CSS border-image-outset Property