Treehouse: Grow your CSS skills. Land your dream job.


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.

Fairly simple demo:

See the Pen border-image by Thierry Goettelmann (@ByScripts) on CodePen.

More Information


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+


  1. shshaw
    Permalink to comment#

    This is the weirdest property ever. Such a strange syntax.

    Under More Information, you have Understanding Border Image listed, but there isn’t a link to the article:

    Editors note: thx fixed!

  2. b1ackhawk
    Permalink to comment#

    I don’t understand how the shorthand properties correspond to the individual. url, repeat and stretch make sense, but not the numbers. The numbers arent the same as in the individual and quantity of numbered properties are different from whats listed under individual.

  3. Ray Whitfield
    Permalink to comment#

    Is there a way to use an embedded svg image as a border?

  4. MerZikain
    Permalink to comment#

    This says it works in FF but it’s not working in mine. Using FF 37.0.2

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";