CSS border-image-outset Property

CSS border-image-outset Property

The border-image-outset property in CSS specifies how far the border image should extend beyond the border box. This property works alongside border-image-source, border-image-slice, and border-image-width to control the overall look and feel of the border.

1. Syntax

selector {
  border-image-outset: value;
}

2. Accepted Values

Value	Description	Example
length	A positive value (in px, em, rem, etc.) that defines the distance the border image extends beyond the border box.	border-image-outset: 10px;
%	A percentage was relative to the border-image-slice value.	border-image-outset: 20%;
auto	The default value, which means the image extends by the same amount as the border width.	border-image-outset: auto;

3. Example – Basic Usage

You can control how far the border image extends beyond the element's border:

div {
  border: 10px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-outset: 15px;
}

✅ The border image extends 15px beyond the border box.

4. Example – Using Percentage

You can use percentage values to set the extent based on the border-image-slice value:

div {
  border: 10px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-outset: 50%;
}

✅ The border image extends 50% of the slice area.

5. Example – Using auto

The auto value means the image will extend by the same amount as the border width:

div {
  border: 10px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-outset: auto;
}

✅ The border image extends by the width of the border, which in this case is 10px.

6. Example – Different Values for Each Side

You can specify different outset values for each side of the element:

div {
  border: 10px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-outset: 10px 20px 30px 40px;
}

✅ Order of values (clockwise):

1. Top → 10px

2. Right → 20px

3. Bottom → 30px

4. Left → 40px

7. Best Practices

✔ Use auto when you want the outset to match the border width.
✔ Use length or percentage for precise control over the image’s extension beyond the border.
✔ Experiment with different values for each side to create unique effects.