CSS border-image-source

The border-image-source CSS property sets the URL of an image to use as a custom border. The image is sliced and resized to fill the border area of the element. The slicing is done at the offsets set by border-image-slice. Use the property to set or override the border image. Consider the shorthand border-image property for setting all related properties in one go.

border-image-source requires the element to have a border (border property). This border is replaced by the image in supporting browsers.

urlgradient
border-image-source: source
border-image-source: url('imageUrl');
border-image-source: linear-gradient(to bottom, orange, red);   /* Partial support for gradients */

Gradients as border images were supported only by Chrome at the time of writing.

Browser Support: By all modern browsers. IE introduced support until IE11. See the caniuse.com compatibility table for more.

Usage

The URL passed to border-image-source should point to an image that CSS will slice and place in the border area. The image source can be set by border-image for more compact code. However, border-image-source allows overriding the image URL, while preserving the rest of the properties(slice offsets, widths and outsets). Take an example using the following image, which is going to be sliced at 10px from the edges:

CSS Border-Image Zigzag Split

The actual image used is available here.

The 10px offset has to be specified using border-image-slice for CSS to know where to slice the image.

This element has a 10px zig zag border.
div.example {
border: 10px solid #cc4242; padding: 15px; border-image-source: url('zigzag_red.png'); border-image-slice: 10 fill; border-image-repeat: round;
}

See border-image-slice and border-image-repeat for details.

SVG Border Images

SVG has the great advantage of scaling without losing detail. This is specially desirable for border images because they normally have to be resized by CSS. Standard raster images may pixelate when the edges are stretched to fill a large container's border.

When using an SVG border image, it's much simpler to give the slice offsets as percentages. Percentages are calculated agains the image's width/height. Here's an example using the following SVG:

CSS SVG border image

Some browsers do not resize SVG border images correctly. The example will look terrible in those browsers.

div.example {
border: 20px solid #cc4242; border-image-source: url('svg_border.svg'); border-image-slice: 33.3333%;
}

The circles are 1/3 (33.3333%) of the image's width/height in diameter.

Finding Border Images

Since border-image was introduced with CSS3, at the time of writing there were no galleries and very few images designed sepecifically for CSS border-image. However, there are a lot of picture frames out there which work well as border images. A quick search for "border image" or "picture frame" should return some useful results.

The alternative is, of course, creating them yourself. Consider using SVG for best results if the border has solid shapes, but be sure to check for compatibility.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>