border-image

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() or linear-gradient(): image source used for the border.
• <number> slice values: divide the image into regions (mirrors 9-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.

<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 and fill 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 and clip-path for advanced framing techniques.
• outline when you need effects that do not influence layout.
• box-shadow for glow-like borders without slicing artwork.