CSS border-image-source Property

CSS border-image-source Property

The border-image-source property in CSS defines the image to be used as a border around an element. This image replaces the normal CSS border.

1. Syntax

selector {
  border-image-source: url("image.png");
}

✅ This property works only if a border is set on the element.

2. Accepted Values

Value	Description	Example
none	No border image (default)	border-image-source: none;
url("image.png")	Specifies an image file	border-image-source: url("border.png");
linear-gradient(...)	Uses a gradient as a border	border-image-source: linear-gradient(to right, red, blue);

3. Example – Using an Image as a Border

div {
  border: 10px solid; /* Required for border-image to work */
  border-image-source: url("border.png");
  border-image-slice: 30;
}

✅ The border.png image is used as a border.

4. Example – Using a Gradient as a Border

div {
  border: 10px solid;
  border-image-source: linear-gradient(to right, red, blue);
  border-image-slice: 1;
}

✅ The border is a gradient from red to blue.

5. Example – No Border Image (Default)

div {
  border-image-source: none;
}

✅ Falls back to the normal CSS border style.

6. Using border-image Shorthand

Instead of setting border-image-source separately, use the shorthand:

div {
  border: 10px solid;
  border-image: url("border.png") 30;
}

✅ This is equivalent to:

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

7. Best Practices

✔ Ensure border is set, or border-image-source won’t work.
✔ Use border-image-slice to control how the image is divided.
✔ Use border-image-source: none; to remove a border image and fall back to normal borders.