CSS border-image: Only the corners filled with the specified background-image. Why?

Question

I would like to use the CSS property "border-image": https://developer.mozilla.org/de/docs/Web/CSS/border-image

But for some reason it fills only the four corners of the element:

My code:

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid transparent;
  border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
}

<div class="wrap">
  <div class="item"></div>
</div>

What do I wrong?

I would expect the little image to be repeated as well vertically as horizontally.

So that the grey box is enclosed with the image pattern.

Any help very much appreciated.

Answer 1

No, it won't because your image is a 50x50 image and the border-image-slice is set as 50 too.

The way border-image-slice works is that the UA will split the image into 9 pieces based on offsets indicated in the slice. In your case, once you slice the image by 50px, there is nothing left in middle to set for the areas marked as 5, 6, 7 and 8 in the below image (Image is copied from MDN).

From the W3C Spec on border-image-slice:

The regions given by the ‘border-image-slice’ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.

You'd have to set the border-image-slice as something lesser than 25 for the areas in the middle to get covered with the image.

Note: Though the spec says top and bottom edge image are also considered as empty, I am not sure why browsers show the image on all four corners. That may be down to browser implementation. Plus browsers seem to work fine even when we specify the border-image-slice as 25. It is slightly contradicting with the spec but you atleast get the reason :)

Answer 2

Not sure what works, but using an image of larger size sort of fixed it.

Please note that usually the images that are used for border-image are images with graphics at their edges. It's not that entire image is repeated along the edges. It's sort of all four corners of the image are aligned to the corners of our div and then rest of the image is adjusted according to specified properties.

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid;
  border-image: url(http://lorempixel.com/150/150/) 25;
}

<div class="wrap">
  <div class="item"></div>
</div>

Answer 3

Not sure if this is what you where looking for. You need to add box-sizing:border-box; to your .item class.

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid transparent;
  border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
box-sizing:border-box;
}

<div class="wrap">
  <div class="item"></div>
</div>

Hope this helps :)

Answer 4

The core issue here is that your source image is not properly created! Using any plain image in border-image rules is generally not going to produce the desired effect.

One must prepare the border image in advance so that it provides the 9 regions required by the specification. Here's a good visual example (taken from MDN):

Given this source image of 90x90px (i.e. each diamond is 30x30px)...

...and applying the following width and slice rule...

border-width: 30px;
border-image-slice: 30;

...we get this result:

You can see the full details of how the source image is split here but the main point is that you must have a properly setup source image first.