CSS border-image-source Property

The CSS border-image-source property sets the image used to draw an element's border instead of the regular border-style. It answers the question "what picture should be sliced up and placed around the box?", while the companion properties decide how that picture is cut and laid out.

This page covers what values border-image-source accepts, how it cooperates with the other border-image-* properties, the gotchas that make a border image silently disappear, and runnable examples you can edit.

border-image-source is one of the CSS3 properties and is almost always set together with border-image-slice through the border-image shorthand.

When you would use it

Reach for a border image when a plain border cannot express the look you want — a decorative frame, a ribbon, a hand-drawn edge, or a gradient outline. Because the source can be any image, including a CSS gradient, you get effects that border-color alone cannot produce.

How border-image-source fits with the other properties

border-image-source only names the image. Four sibling properties control the rest, and a border image is not rendered until border-image-slice is also set:

border-image-slice — cuts the source into 9 regions (4 corners, 4 edges, 1 center).
border-image-width — how thick the drawn border image is.
border-image-outset — how far the image extends beyond the border box.
css-border-image-repeat-property — whether the edge slices stretch, repeat, or round.

Important gotchas

Set a border first. A border image fills the area defined by the element's border, so you still need a border-width (commonly border: 10px solid transparent;). With no border width there is nothing to paint into.
border-image-slice is required. Setting only the source shows nothing; the browser needs slice values to know where the corners are.
none or a failed load falls back to border-style. If the image cannot be displayed, the regular border styles are used — give the element a visible border-style as a safety net.

Initial Value	none
Applies to	All elements, except internal table elements when border-collapse is "collapse". It also applies to ::first-letter.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.borderImageSource = "url()";

Syntax

CSS border-image-source values

border-image-source: none | image | initial | inherit;

Example of the border-image-source property:

CSS border-image-source code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-source property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
  </body>
</html>

Try it Yourself »

Result

![CSS border-image-source description](/uploads/media/default/0001/04/aad8e5faee47f41e2ac519e2aa0214b5c1c9cb8f.png "CSS border-image-source example result" =420x)

Example with a CSS gradient as the source

The source does not have to be a file — any CSS image works, including gradients. This draws a colorful frame with no image asset at all:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient-border {
        border: 12px solid transparent;
        padding: 15px;
        border-image-source: linear-gradient(45deg, #6610f2, #20c997);
        border-image-slice: 1;
      }
    </style>
  </head>
  <body>
    <p class="gradient-border">A border drawn from a CSS gradient.</p>
  </body>
</html>

Here border-image-slice: 1 slices a single pixel, which is enough for a smooth gradient because the gradient continues across each edge.

Values

Value	Description
none	No image is used; the element falls back to its `border-style`. This is the default.
image	Any CSS `<image>`: a `url()` to a file, or a gradient such as `linear-gradient(...)` / `radial-gradient(...)`.
initial	Sets the property to its default value (`none`).
inherit	Inherits the value from the parent element.

border-image — the shorthand for all five border-image-* properties.
border-image-slice — required to actually render the image.
border-image-width and border-image-outset — size and overflow.
border-image-repeat — how the edges tile.

Practice

What is the correct usage of the border-image-source property in CSS?

The border-image-source property can be used with a URL to specify the path to the image.The border-image-source property can include a color code as its value.The border-image-source property is specified with the 'none' keyword when an image is not used.The border-image-source property can accept a series of numbers as its value to customize border width.