CSS border-image-source Property

Definition and Usage

The border-image-source property sets the image or gradient used as an element’s border artwork. It is the first piece of a border image: choose the source, then cut it with border-image-slice.

The value is none or any CSS <image> — typically url() or a linear-gradient(). When the source is none, the ordinary border-style frame shows instead.

CSS Syntax

Common <image> forms: url("frame.png"), linear-gradient(...), repeating-linear-gradient(...).

Property Values

How to Use border-image-source

Pick the artwork, give the border some width, then slice the source so corners and edges look right.

1. Set a non-zero border-width (for example border: 20px solid;).
2. Set border-image-source to a url() or a gradient. It is not inherited.
3. Set border-image-slice so the browser knows how to cut the source.
4. Or use the border-image shorthand to set source and slice together.

Live Preview

Change border-image-source and watch the frame switch between an image, a gradient, and no image.

CSS Examples

Each snippet focuses on border-image-source, plus the border width and slice it needs to show. Use Try It Yourself for a live editor.

<style>
  div {
    border: 30px solid;
    border-image-source: url("/images/apple.png");
    border-image-slice: 30;
    padding: 12px;
  }
</style>

<div>image source</div>

<style>
  div {
    border: 16px solid;
    border-image-source: linear-gradient(135deg, #2563eb, #dc2626);
    border-image-slice: 1;
    padding: 12px;
  }
</style>

<div>gradient source</div>

<style>
  div {
    border: 4px solid #0f172a;
    border-image-source: none;
    padding: 12px;
  }
</style>

<div>no image source</div>

Key Takeaways