Last updated on

The border-image property of CSS allows you to use an image in which to paint the border of an element with.

It’s not as straight forward as, say, background-image, which just places the image into the background area. border-image takes the image you give it and slices it like a tic-tac-toe board into nine slices (at the measurements you give it). It then places the corners at the corners, and the middle sections it repeats as needed to fill the element space. The middle section also repeats (or stretches) as you specify.

The individual properties, with their defaults are:

div {
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

Or as shorthand:

div {
  border-image: url("image.png") 25 30 10 20 repeat stretch;
}

Remember that the element needs a border in which to apply this image.

Related

Browser Support

At the time of this writing, no browser implements un-prefixed. Use -webkit, -moz-, and -o- accordingly.

Chrome Safari Firefox Opera IE Android iOS
7+ 3+ 3.5+ 10.5+ 10- 3.2+ 2.1+

Leave a Reply

Your email address will not be published. Required fields are marked *