CSS property border-image-outset

The border-image-outset property in CSS defines the extent to which an element's border-image extends beyond its border-box, creating a space between the element's border-image area and the edge of its border.

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%; 
  border-image-repeat: repeat;
  border-image-outset: 2;
}

See the Pen Untitled by Mushtaq Ahmad (@MushtaqPhysicist) on CodePen.

The CSS border-image-outset property, also known as the "Edge Overhang" property, is specified in the CSS Backgrounds and Borders Module Level 3. Its purpose is to enable the border image area to extend beyond an element's border-box, which is accurately described by the term "Edge Overhang".

Syntax

 		border-image-outset: [<length [0,∞]> | <number [0,∞]>]{1,4}
	

1. Initial value: 0
2. Applies to: all elements (including the ::first-letter pseudo-element), except internal table elements when border-collapse is set to collapse.
3. Inherited: no
4. Percentages: n/a
5. Computed value: four values, each a number or absolute length
6. Animation type: by computed value

Similar to the shorthand properties for margin and padding, the CSS border-image-outset property can take between one and four values:

1. One value: Sets all four sides at the same outset distance.
2. Two values: The first value sets the outset for the top and bottom sides; the second value sets the outset for the left and right sides.
3. Three values: The first value sets the outset for the top side; the second value sets the outset for the right and left sides; the third sets the outset for the bottom side.
4. Four values: Sets the outset for each side in clockwise order, starting from the top side (top, right, bottom, and left, in that order). n/a

Values

/* Length value (includes unit) */
border-image-outset: 2rem;

/* Number value (unitless) */
border-image-outset: 2;

/* Single value: Sets all four sides */
border-image-outset: 2;
border-image-outset: 2rem;
border-image-outset: 32px;

/* Two values: top and bottom | left and right */
border-image-outset: 4 6rem;
border-image-outset: 2 3rem;
border-image-outset: 1 24px;

/* Three values: top | left and right | bottom */
border-image-outset: 4rem 2 5rem;
border-image-outset: 5 8rem 10rem;
border-image-outset: 3 6 9;

/* Four values: top | right | bottom | left */
border-image-outset: 15 4rem 4 10rem;
border-image-outset: 2 5 13rem 4;
border-image-outset: 2 5 3 7rem;

/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;
    

<length [0,∞]>

In CSS, a length is a numerical value with a unit of measurement such as pixels (px), rems (rem), percentages (%), viewport height (vh), etc. These values can be used with the border-image-outset property to specify the height and width dimensions of the image's outset. Examples of length values include 10px, 1.35rem, 50%, 25vh, and so on.

 
    .container{
  /* Sets dimensions on all four sides */
  border-image-outset: 2rem;
}
    
  

In the above example, the border-image-outset property is set to a value of 2rem for the top, right, bottom, and left outsets of the border. This means that the outset for each side of the border will be 2rem in length.

See the Pen border-image-outset <length [0,∞]> example by Fafowora Sunkanmi (@sunkanmii-the-styleful) on CodePen.

<number [0,∞]>

In CSS, a number value is similar to a <length> value, but it does not include a unit of measurement. If we set a number value for the border-image-outset property, it will be interpreted as a multiple of the border-width value. Specifically, the computed value will be the product of the border-image-outset value and the border-width value.

 border-image-outset = <number> * border-width 

Say we have the following style rule:

 
    .container {
  border-image-outset: 4;
  border-width: 1rem;
}
    

To calculate the border image offset based on the border-image-outset property, we need to multiply the unitless <number> value of the property (in this case, 4) by the border-width value (which is 1rem in this example). This multiplication results in a total border image offset of 4rem.

 border-image-outset = 4 * 1rem = 4rem 

See the Pen border-image-outset <number [0,∞]> example by Fafowora Sunkanmi (@sunkanmii-the-styleful) on CodePen.

border-image-outset vs. border-image-width

Although some aspects of their values are similar, border-image-width and border-image-outset are distinct CSS properties that affect different aspects of the border image. Both properties can accept up to four values, and they can both use <length> and <number> values. However, border-image-width specifically alters the physical dimension of the border image area, while border-image-outset modifies the distance between the border image and the content box, enabling the border image to extend beyond the border box. These differences highlight how each property has a unique impact on the border image.

Here are a few points that you should consider or bear in mind.

A few more things about the border-image-outset property worth knowing:

1. To ensure that an element's borders and padding do not add to its physical width and cause it to appear larger than intended, it is important to set the box-sizing property of the element to border-box. This can be achieved by using the universal selector in CSS and setting box-sizing to border-box, like so: * { box-sizing: border-box; }.
2. It is not possible to use negative values for this property.
3. If a border-image extends beyond the border box of an element, it will not trigger scrolling, and any parts that overflow will be invisible to mouse events and unable to capture events.
4. While outset images do not cause a scrolling mechanism, it is possible for them to be clipped by an ancestor element or the viewport.

Demo

Modify the values of border-image-outset, border-image-width, and border-width in the following code to observe the impact of each input on the size of the image:

See the Pen border-image-outset demo example by Geoff Graham (@geoffgraham) on CodePen.