Definition
The border-image
CSS property lets you draw an image as the border around an element. It’s a shorthand property for setting border-image-source
, border-image-slice
, border-image-width
, border-image-outset
, and border-image-repeat
. For instance, to use an image as a border, you could use: border-image: url(border.png) 30 round;
, where border.png
is your image source, 30
is the slice, and round
is the repeat method.
Syntax
.frame {
border: 16px solid transparent;
border-image: url("/img/frame.png") 30 stretch;
}
Values
-
url()
orlinear-gradient()
: image source used for the border. -
<number>
slice values: divide the image into regions (mirrors9-slice
scaling). -
fill
: optionally paint the center area with the source. -
stretch
/repeat
/round
/space
: control how slices scale along edges.
Practical Examples
.callout {
border: 12px solid transparent;
border-image: linear-gradient(135deg, #0ea5e9, #6366f1) 1;
}
Border images let you reuse gradients or custom artwork without extra wrapper elements.
Solid border
border-image: linear-gradient(...)
<div class="grid gap-4 sm:grid-cols-2">
<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Solid border</p>
<div class="rounded-lg border-4 border-slate-300 p-4 text-sm text-slate-700">Standard border</div>
</div>
<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">border-image: linear-gradient(...)</p>
<div class="rounded-lg border-8 border-transparent p-4 text-sm text-slate-700" style="border-image: linear-gradient(135deg, #0ea5e9, #6366f1) 1;">Gradient frame</div>
</div>
</div>
Tips & Best Practices
- Define a solid
border-width
even when the sides are transparent—border-image
relies on it. - Use vector-friendly gradients to avoid pixelation when borders scale.
- Combine
border-image-slice
andfill
to extend artwork into the element background.
Accessibility & UX Notes
Decorative borders should never convey critical information alone; pair with text or icons for status indicators.
Browser Support
Supported in modern browsers (Chrome 15+, Firefox 15+, Safari 6+, Edge). Internet Explorer only supports partial syntax.
Related
-
mask
andclip-path
for advanced framing techniques. -
outline
when you need effects that do not influence layout. -
box-shadow
for glow-like borders without slicing artwork.