Custom image offset distance

border-image-outset

Specify the distance to offset the custom image from the normal border area, similar to the "outline" property.

Property values

This property specifies how far from the element's nominal border to offset the border image regions when rendering them.

This property expects anywhere from one to four values, with their interpretation as follows:

number of values sides effected
1 value Sets all four sides: top, right, bottom, left
2 values 1st value: top and bottom edges
2nd value: right and left edges
3 values 1st value: top edge
2nd value: right and left edges
3rd value: bottom edge
4 values 1st value: top edge
2nd value: right edge
3rd value: bottom edge
4th value: left edge

For each value, specify a number without units as a scaling factor. The element's border-width-* values will be multiplied by that scaling factor to arrive at the offset.

Alternatively, use any of these font-relative typographic units to set the border-image-outset:

em em The font-size of the current font
rem relative em The font-size of the <html> element
lh line height The line-height of the current font
rlh relative line height The line-height of the <html> element
cap cap height The nominal height of the current font's capital letters
ex "x" The height of the current font's "x" glyph
ch "0" The advance measure (the width) of the current font's "0" glyph
ic ideograph count The advance measure (the width) of the current font's "水" ideograph

Or use any of these fixed size units which are independent of the current font:

in inch A size equal 96px
px pixels A size equal to 1/96 inch
pt point A size equal 1in/72 = 1.33px
pc pica A size equal 1in/6 = 12pt = 16px
cm centimeter A size equal to 96px/2.54 = 37.8px
mm millimeter A size equal to 96px/25.4 = 3.8px
Q quarter millimeter A size equal to 96px/1016 = 0.94px

Examples

/* the image regions will appear 19px outside the element */
border-image-width: 20px;
border-width: 1px;
border-image-outset: 20px;

/* the image regions will appear half-inside/half-outside the element */
border-image-width: 20px 16px 20px 16px;
border-width: 10px 8px 10px 8px;
border-image-outset: 0.5;
border-image-outset
0

style > framing > border-image-outsetCustom image offset distance

🔗 🔎