CSS border-image

The border-image CSS property allows using an image as border for an element. A supplied image is sliced by CSS into 8 regions: four corners and four edges. These regions are resized and placed fitting the border area of the element. The property gives control over where the image is sliced, and how are the slices placed, resized and repeated.

border-image requires a border to be set to have an effect. Use the border property to set a border style and width (eg. border: 10px solid;). This border will be replaced by the image in supporting browsers and the image slices will be resized to fit this width by default.

urlgradientnum%num%pxptemvw...numpxptemvw...stretchrepeatroundspace
border-image: source slice /width /outset repeat
border-image: url('imageUrl') 10;              /* slice 10px thick frame, stretch edge sections */
border-image: url('imageUrl') 5% round;        /* slice image at 5% from each edge, repeat edges */
border-image: url('imageUrl') 10 20 30 40;     /* slice offsets: top right bottom left */
border-image: url('imageUrl') 10 / 2 repeat;   /* resize edges to 2 x border-width */
border-image: url('imageUrl') 5 / 2 / 1;       /* resize to 2 x border-width, outset 1 x border-width into margin */
border-image: url('color_frame.png') 5 8 6 10 / 1 2 1 3 / 0 1 .5 .5;   /* different settings for each edge */

  • source is a single image URL.
  • slice may be up to four spaced values, the offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions. It accepts pixel lengths as numbers with no units. Adding the px unit is invalid.
  • width again, may be up to four values which give the width of the top, right, bottom and left border images of the element. The width of the real border is not affected, the image is placed on top. It covers the padding or content areas if the border-image width is greater than border-width. A unitless number is interpreted as a multiple of the border width of the element. The border image width is equal to the border width by default.
  • outset moves the border image into the padding area by the length given. Up to four spaced values are accepted as well. Unitless numbers are multiplied by the element's border width to get the offset.
  • repeat controls the repetition of the edge regions, which may be stretched, repeated, stretched and repeated (round) or spaced and repeated (space) to fit.

Browser Support: Supported by all modern browsers. No support by IE10- but IE11 introduces it. See the caniuse.com compatibility table for details.

A Simple Frame

Border image is perfect for creating fancy image frames. Here's an example using the following frame, which should be split in 9 parts by CSS as:

CSS border-image frame split

The actual image used is available here.

Each border has been labeled with its width. This width is passed to border-image, which divides the image in 9 parts: four corners, four sides and the center which is removed.

img.framed {
border: 20px solid #ccb089; border-image: url('wooden_frame.jpg') 50 65;
}

Note how the widths are given with no units. Adding px is in fact invalid.

Repeating the Edges

Border images can be small and work for any size of element if they are created in a way that allows the edges to be repeated. Take the following image which is sliced at 10px from the edges as:

zigzag border-image split

The zigzag border image is available here.

The repeat value (border-image-repeat property) controls the repetition of the middle sections of the border image. The two most useful values are stretch and round:

border-image: url('zigzag.png') 10 stretch; stretches the middle sections to fill the area
border-image: url('zigzag.png') 10 round; repeats a whole number of times by scaling to fill the area and fit the corner sections

The other possible value is repeat, which repeats without resizing, meaning the image may be cut near the corners. The space value is supposed to space the tiles to fit a whole number of repetitions, but there's not full support for it.

Width and Outset

By default, the width of the border image is the same of the border, as set using border or border-width. This is okay most of the time, but border-image gives extra control through the width and outset values (border-image-width and border-image-outset properties). They allow changing each of the four border widths and positions independently. Here's an example using the following image with 10px borders:

colorful border-image
The content, padding and margin areas are labeled. Border-image does not affect the size of these areas.
div.cont {
margin: 30px; padding: 30px; border: 10px solid orange; border-image: url('color_frame.png') 10 / 1 2 3 4 / 0 1;
}

The values after the URL are:

  • 10 (slice) is the inward offset for slicing the image. Up to four spaced values may be given for top, right, bottom and left offsets respectively.
  • 1 2 3 4 (width) gives the widths of the top, right, bottom and left border images respectively. Numbers with no units are multiples of border-width. In the example, they are equivalent to 10px 20px 30px 40px. In this case the border is just 10px, so the border image covers part of the padding area, and may go into the content if necessary. border-width, padding and margin values are never affected.
  • 0 1 (outset) gives the amount by which the border image extends beyond the border-box, into the margin area. In this case I added an offset for the left and right images only. Up to four values may be given in the usual clockwise order starting with the top outset. Once again, a number is interpreted as a multiple of border-width. The value can be used to move the border images out of the padding area.

CSS Gradient Borders

Gradients are treated as images in CSS. border-image is no exception, it allows a CSS gradient to be passed and set as border. Unlike background-image, border-image doesn't allow multiple gradient layers.

Gradient borders were only supported by Chrome at the time of writing. The solid border-color works as fallback, because it is visible in browsers that don't support gradient borders.

img.framed {
border: 10px solid gray; border-image: linear-gradient(to right, black, gray, black) 20%;
}

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>