CSS border-image Property

The border-image property allows you to use a custom image or gradient to decorate an element's border instead of standard lines.

selector { border-image: source slice width outset repeat; }
<image> Specifies the image source via a URL or a CSS gradient.
<number> Represents pixel offsets for the slicing process or a multiplier for border width.
<percentage> Defines slices or widths as a percentage relative to the image size or border area.
<length> Specifies a fixed distance for the border image width or outset using standard units.
stretch Stretches the source image slices to fill the border area.
repeat Tiles the source image slices to fill the border area.
round Tiles the slices and scales them so an exact number of tiles fit the area.
space Tiles the slices and distributes extra whitespace between them to fill the area.

Code Examples

This basic example uses a CSS linear gradient to create a colorful border frame without using an external image file.

<div style="border: 10px solid; border-image: linear-gradient(45deg, #ff5500, #0099ff) 1;">
  Gradient Border Example
</div>

This advanced example uses a sliced image for the border and includes JavaScript to dynamically change the border thickness.

<div id="box" style="border: 20px solid; border-image: url('https://www.adamkhoury.com/images/border_frame.png') 30 round; padding: 20px;">
  Interactive Border Image
</div>
<button onclick="adjustBorder()">Change Width</button>

<script>
function adjustBorder() {
  const box = document.getElementById("box");
  box.style.borderImageWidth = "40px";
  box.style.borderColor = "#333333";
}
</script>

Pro Tip

You do not need an external image file to use this property. You can use a CSS linear-gradient or radial-gradient as the source. This is a high-performance way to create colorful, modern borders without adding extra HTTP requests to your server.

Deep Dive

Think of border-image like a flexible picture frame. You provide one image, and the browser slices it into nine sections like a tic-tac-toe board: four corners, four sides, and a middle. The corners stay fixed in size, while the sides stretch or repeat to cover the length of the element. You use the slice value to tell the browser exactly where to make those cuts. If you add the "fill" keyword to your slice settings, the middle section of your image will be used as a background for the element itself. It is a shorthand property that combines border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat.

Best Practices

Always define a standard border property as a fallback. If your image fails to load or the user is on a browser from the stone age, the element still needs a visible boundary. Use SVG for border images when possible so they stay sharp on high-resolution screens. When using repeating patterns, the "round" keyword is usually better than "repeat" because it prevents half-cut images at the ends of the border.

Common Pitfalls

The most common mistake is forgetting that you still need to set a border-style (like solid) and a border-width for the border-image to appear in many browsers. Also, keep in mind that border-image does not respect border-radius; if you have rounded corners on your element, the border-image will typically ignore them and remain rectangular.

Accessibility

Border images are decorative and are not interpreted by screen readers. Ensure that the colors within your border image provide enough contrast against the element content and the page background so that the element's boundaries are clear to users with low vision.

Dev Data Table: border-image property

default none 100% 1 0 stretch
animatable no
inherited no
experimental no
year_intro 1999
year_standard 2011
js_syntax_1 element.style.borderImage = "url('border.png') 30 stretch";
js_syntax_2 element.style.setProperty("border-image", "url('border.png') 30 stretch");
js_note When manipulating this property in JavaScript, use the camelCase borderImage property name on the style object.
browsers { "Chrome": 15, "Edge": 12, "Firefox": 15, "Safari": 6, "Opera": 15, "Chrome Android": 18, "Safari on iOS": 6, "Samsung Internet": 1, "Opera Mobile": 14 }
results render here...