CSS border-image-source Property

What You’ll Learn

The border-image-source property chooses the image or gradient that becomes your element’s border artwork.

Definition and Usage

The border-image-source CSS property sets which image or gradient is used as the source for a border image. It is a longhand of the border-image shorthand and defines the artwork before slicing, repeating, and sizing are applied.

With border-image-source, you can move beyond plain solid, dashed, or dotted borders and use decorative frame images or colorful gradients. The source alone does not paint the border — you also need a border width and typically a border-image-slice value.

Where Source Fits in border-image

📝 Syntax

border-image-source accepts an image URL, a gradient, or none:

selector {
  border-image-source: url("image.jpg") | <gradient> | none;
}

Basic Example

div {
  width: 300px;
  height: 200px;
  border: 10px solid transparent;
  border-image-source: url("border-image.png");
  border-image-slice: 30;
}

Syntax Rules

• Use url() to reference PNG, JPEG, WebP, GIF, or SVG image files.
• CSS gradients such as linear-gradient() and radial-gradient() are valid sources.
• none disables the border image and restores normal border painting.
• Always pair with a visible border-width (often via border: 10px solid transparent).
• Set border-image-slice so the browser knows how to divide the source.

Default Value

The default value of border-image-source is none. When set to none, no image border is used and the element falls back to the standard border-style, border-width, and border-color properties.

💎 Property Values

Common Value Types

border-image-source vs related properties

Examples Gallery

Try border-image-source with image URLs, gradients, and the none value.

<style>
  div {
    width: 300px;
    height: 200px;
    border: 10px solid transparent;
    border-image-source: url("border-image.png");
    border-image-slice: 30;
  }
</style>

<div></div>

.card {
  border: 4px solid transparent;
  border-image-source: linear-gradient(135deg, #2563eb, #7c3aed);
  border-image-slice: 1;
  padding: 1rem;
  background: #fff;
}

.badge {
  border: 6px solid transparent;
  border-image-source: radial-gradient(circle, #f59e0b, #ef4444);
  border-image-slice: 1;
  padding: 0.75rem 1rem;
  background: #fff;
  border-radius: 999px;
}

.panel {
  border: 3px solid #2563eb;
  border-image-source: none;
  padding: 1rem;
  background: #fff;
}

💡 Best Practices