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:
margin: 50px auto;
border: 50px solid transparent;
border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
No, it won't because your image is a 50x50 image and the
border-image-slice is set as 50 too.
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
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 :)