CSS border-image-source Property

This property sets the image or gradient to be used as an element's border. It defines the source material for the border-image shorthand property.

selector { border-image-source: value; }

none	No image is used as a border; the element will fall back to its defined border-style.
<image>	A reference to an image via url() or a CSS gradient function to be used as the border material.

Code Examples

A basic example using an external image file to create a patterned frame around an element.

.photo-frame {
  border-width: 20px;
  border-style: solid;
  border-image-source: url("https://www.adamkhoury.com/images/border_pattern.png");
  border-image-slice: 30;
}

An advanced example using a CSS gradient as the border source, applied dynamically via JavaScript.

<div id="gradientBox" style="border: 10px solid #cccccc; border-image-slice: 1;">Dynamic Border</div>

<script>
const box = document.getElementById("gradientBox");
// Using JavaScript to dynamically apply a gradient border source
box.style.borderImageSource = "linear-gradient(45deg, #ff5733, #33ff57)";
</script>

Pro Tip

You can use CSS gradients as the source to create high-end gradient borders without using wrapper divs or hacks. It is a clean, modern way to add a splash of color to your UI components without adding extra weight to your page load through external image files.

Deep Dive

Think of border-image-source like picking out the raw lumber or material for a custom picture frame. By itself, it doesn't do much because the browser needs to know how to cut and stretch that material. It accepts a standard image URL or a CSS gradient. Once you've defined the source, you typically need border-image-slice to tell the browser how to divide the image into nine regions—four corners, four edges, and a center. It is important to realize that the border-image-source will effectively cover up any border-color you have set, though that color remains vital as a fallback if the image fails to load or is not supported.

Best Practices

Always set a standard border fallback. Use a shorthand like border: 5px solid #333333; so that if your image path breaks, the user still sees a defined boundary. Use SVGs for your border images whenever possible; they stay sharp on high-resolution screens and scale perfectly without pixelation. If you are using gradients, keep them simple to ensure performance stays snappy during scrolls.

Common Pitfalls

The most common mistake is forgetting that border-style must be something other than none for the image to appear in some browsers. Also, if you don't define border-image-slice, the image won't display correctly because the browser won't know how to distribute it across the border area. It will often just try to squash the whole image into the corners, which looks like a mess.

Accessibility

Borders are often used to define the clickable area of buttons or the structure of a form. If your border-image-source has low contrast against the background, users with visual impairments might struggle to see where the element ends. Always check your contrast ratios, especially when using thin gradients or complex patterns.

Dev Data Table: border-image-source property

default	none
animatable	no
inherited	no
experimental	no
year_intro	2009
year_standard	2012
js_syntax_1	element.style.borderImageSource = "url('border.png')";
js_syntax_2	element.style.setProperty("border-image-source", "linear-gradient(#ff0000, #0000ff)");
js_note	When targeting this property in JavaScript, remember that the image path is relative to the HTML document, not the script file.
browsers	{ "Chrome": 16, "Edge": 11, "Firefox": 15, "Safari": 6, "Opera": 15, "Chrome Android": 18, "Safari on iOS": 6, "Samsung Internet": "1.0", "Opera Mobile": 15 }