CSS border-image Property

Definition and Usage

The border-image property is a shorthand that paints an image or gradient around an element. It replaces the usual solid border look with sliced regions from a source.

It sets border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. Keep a normal border-style and width as a fallback — some browsers skip the image when style is none or width is 0. It is not inherited.

CSS Syntax

A minimal useful form is source + slice, for example linear-gradient(...) 1. Width and outset use / separators.

Property Values

How to Use border-image

Give the box a border area, then replace the paint with an image or gradient.

1. Set a visible border first, for example border: 20px solid.
2. Choose a source (URL or gradient).
3. Add a slice so the browser knows how to cut the source.
4. Optionally add / width, a second / outset, and a repeat keyword such as round.

Live Preview

The box already has a solid border width. Switch shorthand presets to see gradient and stripe frames.

CSS Examples

Each snippet keeps CSS lean: a border area, then border-image. Use Try It Yourself for a live editor.

<style>
  p {
    border: 20px solid;
    border-image: linear-gradient(135deg, #2563eb, #dc2626) 1;
  }
</style>

<p>Gradient border</p>

<style>
  p {
    border: 20px solid;
    border-image: linear-gradient(135deg, #2563eb, #0f766e) 1 / 20px round;
  }
</style>

<p>Rounded fit</p>

<style>
  p {
    border: 30px solid;
    border-image: url("/images/apple.png") 30 / 30px round;
  }
</style>

<p>Image border</p>

Key Takeaways