Borders & Outlines
border-image-width
Setting the painted width of a border image.
Overview
| Class | Declarations |
|---|---|
border-image-width:auto | border-image-width: auto;
|
border-image-width:<size> | border-image-width: <size>;
|
border-image-width:<vertical>|<horizontal> | border-image-width: <vertical> <horizontal>;
|
border-image-width:<top>|<horizontal>|<bottom> | border-image-width: <top> <horizontal> <bottom>;
|
border-image-width:<top>|<right>|<bottom>|<left> | border-image-width: <top> <right> <bottom> <left>;
|
Basic usage
Set the border image width
Image width controls inward paint independently of the regular border. These identical 12px borders compare a multiplier of 1, a multiplier of 2, and an explicit 16px image width.
Set the border image width
A bare number multiplies regular border width. The box reading measures layout, so paint can grow without changing it.
<!-- Width 1 · 12px paint --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) 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><!-- Width 2 · 24px paint --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) border-image-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width:2 font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div><!-- Width 16px · explicit length --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) border-image-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width:16px 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-width\:2 { border-image-width: 2 } .border-image-width\:16px { border-image-width: 16px }}A bare number multiplies the corresponding regular border width. Larger paint can cover the padding area without resizing the 250 × 130 border box.
Use automatic width
For this intrinsic 96 × 96 source, auto uses the natural 24-unit slices as 24px painted widths. Compare it with the explicit 24px result.
Use automatic width
A bare number multiplies regular border width. The box reading measures layout, so paint can grow without changing it.
<!-- Auto · natural 24px slices --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) border-image-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width:auto font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div><!-- 24px · explicit comparison --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) border-image-repeat:stretch border-image-slice:24 border-image-source:url('/demo/border-grid.svg') border-image-width:24px font-md bg-surface-base text-body box-border"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>When a slice has no applicable natural size, auto falls back to the regular border width. The computed value can still read auto; the comparison shows the actual paint.
Apply conditionally
Widen to sm to double the image width from 12px to 24px. Print returns to the width multiplier 1.
Apply conditionally
A bare number multiplies regular border width. The box reading measures layout, so paint can grow without changing it.
<!-- Width 1 → 2 at sm --><div id="target" class="flex items-center justify-center h:130px w:250px max-w:100% p-md b:12px|solid|var(--color-blue-60) 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-width:1@print border-image-width:2@screen@sm"> <span class="px-xs py-3xs bg-surface-base text-body"> Edge sample </span></div>The layout box stays fixed. Its regular border width remains 12px in every state.