border-image-outset
Setting how far the border image extends beyond the border box.
Overview
| Class | Declarations |
|---|---|
border-image-outset:<size> | border-image-outset: <size>;
|
border-image-outset:<vertical>|<horizontal> | border-image-outset: <vertical> <horizontal>;
|
border-image-outset:<top>|<horizontal>|<bottom> | border-image-outset: <top> <horizontal> <bottom>;
|
border-image-outset:<top>|<right>|<bottom>|<left> | border-image-outset: <top> <right> <bottom> <left>;
|
Basic usage
Extend the border image outside the box
Outset moves image paint outside the border box without adding layout space. Compare zero with 1, which multiplies the 12px regular border width.
<!-- Zero outset · border-box edge --><div id="target" class="flex items-center justify-center h:130px w:220px max-w:100% m-lg p-md b:12px|solid|var(--color-blue-60) border-image-outset:0 border-image-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width:1 font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div><!-- Outset 1 · 12px outside --><div id="target" class="flex items-center justify-center h:130px w:220px max-w:100% m-lg p-md b:12px|solid|var(--color-blue-60) border-image-outset:1 border-image-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width:1 font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>Generated CSS
@layer utilities { .border-image-outset\:1 { border-image-outset: 1 } .border-image-outset\:12px { border-image-outset: 12px }}The authored margin leaves room for paint. 1 means a multiplier, while 1px is a length; an outset of 8 would extend 96px on this border.
Use separate vertical and horizontal values
Two values apply to top/bottom, then left/right. This example extends 8px vertically and 16px horizontally.
<!-- 8px vertical · 16px horizontal --><div id="target" class="flex items-center justify-center h:130px w:220px max-w:100% m-lg p-md b:12px|solid|var(--color-blue-60) border-image-outset:8px|16px border-image-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width:1 font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>Three values mean top, horizontal, bottom. Four follow top, right, bottom, left. Outset paint can overlap nearby content if the layout does not reserve room.
Apply conditionally
At sm, move the painted edge 12px outward. Print returns the image to the border box.
<!-- Zero → 12px outset at sm --><div id="target" class="flex items-center justify-center h:130px w:220px max-w:100% m-lg p-md b:12px|solid|var(--color-blue-60) border-image-outset:0 border-image-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width:1 font-md bg-surface-base text-body box-border border-image-outset:0@print border-image-outset:12px@screen@sm"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>The measured box remains 220 × 130. Outset is a paint adjustment, so it does not change the declared margin or content size.