CSS border-image-source Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-image-source CSS property specifies the image to use as the decorative border around an element. It does not, by itself, control how that image is sliced, scaled, or tiled - it simply supplies the image resource (raster image, SVG, or an image-like gradient) that the browser will use. The visual result depends on several companion border-image properties that interpret and manipulate that resource into the actual border artwork; for example the shorthand border-image bundles the source together with those other controls for convenience.

Once a source image is provided, the browser typically divides it into nine regions (four corners, four edges, and a middle) according to the values of border-image-slice, then places and scales those regions into the border area. How wide the image’s edge pieces are rendered is influenced by border-image-width and by the element’s own border widths; whether the edge pieces are stretched, repeated, or rounded is governed by border-image-repeat. Any extra area outside the border-box that comes from drawing the image can be handled with border-image-outset.

Because border-image-source supplies only the image, it interacts with the underlying border geometry and paint rules of the element. If an element has no border style (for example, if the border is set to none), the supplied border image will not be drawn even if a source exists; the presence and thickness of the border (border-style and border-width) still matter for the final placement. The property also differs from background-image: background images paint into the element’s background box(es) and tile/cover differently, whereas a border image is explicitly mapped to the border area and treated as a decorative frame.

From a practical standpoint, choosing an appropriate image for border-image-source means considering how its edges and corners will scale and whether seams will be visible when repeated or stretched. High-resolution assets (or SVGs) tend to scale more cleanly across device pixel ratios, and thinking about the slice regions and repetition rules up front helps avoid blurry or distorted border edges. Finally, because the property only points to the artwork, changing its value is a cheap way to swap border themes without touching layout properties that affect element geometry.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: 'none' or the image with its URI made absolute
Animatable: No
JavaScript syntax: object.style.borderImageSource

Interactive Demo

border-image-source: url('images/border.png');

border-image-source: url('images/border.svg');

border-image-source: repeating-linear-gradient(45deg, transparent, green 20px);

border-image-source: none;

Example of the border-image-outset property.

Syntax

border-image-source: none | <image>

Values

noneborder-style is used instead.
<image>This value contains a path to an image that you want to apply to the element in question as a background image

Example

HTML

<body>

  <main class="wrap">

    <div class="card">

      <h1>Border Image Source</h1>

      <p>This card uses border-image-source with an inline SVG gradient.</p>

      <a class="btn" href="#">Action</a>

    </div>

  </main>

</body>

CSS

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.wrap {
  padding: 24px;
}

.card {
  background: #fff;
  padding: 24px;
  width: 360px;
  border: 16px solid transparent;
  border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23007ACC'/><stop offset='1' stop-color='%2300FFA3'/></linearGradient></defs><rect width='120' height='120' fill='none' stroke='url(%23g)' stroke-width='16' stroke-linecap='square' /></svg>");
  border-image-slice: 30;
  border-image-width: 16px;
  border-image-outset: 0;
  border-image-repeat: round;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

h1 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #073657;
}

p {
  margin: 0 0 16px 0;
  color: #334155;
  line-height: 1.4;
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  background: #007ACC;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-image-source property. Hover over a browser icon to see the version that first introduced support for this CSS property.