1

I am trying to understand how does the border-image-slice work.

When you load a border-image using the border-image-source, the image is placed on the 4 corners of the element. Top-right, top-left, bottom-right and bottom-left. Then, you can use border-image-slice property to "slice" the image and determine how much of the original image to be displayed. You can use numbers or percentages. By default, 100% of the image is displayed. As you start cutting down the number, the image gets sliced by that percentage or pixel. So, if you define 50%, that means 50% of the image is displayed.

So far, so good.

What i don't understand, however, is the "edge regions" which get "activated" and filled by the "sliced" parts of the image at a seemingly random percentage.

So, in the below image taken from MDN, we can see the 9 regions of the image. enter image description here

Before even slicing the image, the entire image is displayed in the 4 corners. But when you start slicing the image, the image remains displayed at the 4 corners, but it just keeps getting cut, and fewer and fewer parts of the image are displayed. The edge regions remain empty UNTIL you hit about 40% or just 40 in border-image-slice. At a seemingly random number, all of a sudden, the edge regions get filled, as if the corner regions had a defined size which got exceeded.

Here is an example.

I am using the below image. Its size is 90x90.

enter image description here

HTML:

div {
    padding:25px;
    font-size:20px;
    border:50px solid;
    outline:1px dashed;
    border-image-source: url('https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png');
    border-image-slice:45; 
}
<div>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, eligendi perferendis? Magnam in iste sunt quaerat ullam porro molestiae harum! Corrupti, aperiam? Eligendi facere dignissimos soluta molestiae suscipit voluptate, magni error laborum atque recusandae cum temporibus eos accusamus vitae. Quae laudantium libero cum, aliquam repellat ad, vitae maiores nulla consequatur quibusdam sed vero amet sapiente? Qui aut optio commodi impedit!
</div>

Now, as you can see from the snippet above, the border-image-slice is set to 45, and the edge regions are empty. The 4 images displayed at the 4 corners are being sliced, and only 45px are being shown of the image.

Now, the confusing part is when you decrease the number from 45 to 44, just take 1 number off.

div {
    padding:25px;
    font-size:20px;
    border:50px solid;
    outline:1px dashed;
    border-image-source: url('https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png');
    border-image-slice:44; 
}
<div>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, eligendi perferendis? Magnam in iste sunt quaerat ullam porro molestiae harum! Corrupti, aperiam? Eligendi facere dignissimos soluta molestiae suscipit voluptate, magni error laborum atque recusandae cum temporibus eos accusamus vitae. Quae laudantium libero cum, aliquam repellat ad, vitae maiores nulla consequatur quibusdam sed vero amet sapiente? Qui aut optio commodi impedit!
</div>

Now, as you can see, something completely unexpected happens. I would expect the image to just keep decreasing as it gets sliced more and more, and fewer parts being displayed, yet something completely different happens. The edge regions get filled by the sliced parts of the image.

I don't understand why? What is the logic behind this? Why is this happening when the border-image-slice is set to exactly 44 or lower? Do the corner regions have a defined size, which got exceeded? But how does it get exceeded, since i am only cutting the images, and fewer parts of the image become visible?

  • the related part in the duplicate is the following: *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.* ... I advise you to read it fully to better understand – Temani Afif Oct 18 '20 at 14:50
  • Can you please clarify what does "the sum of the right and left widths" being equal or greater than the "width of the Image" means? What does "the sum of the right and left width" refers to? Left-width or right-width just means that you are specifying the width of that particular side only. So i am confused what does "the sum of both" mean? Does it simply mean the actual width of the image? –  Oct 18 '20 at 15:15
  • follow the duplicate answer and you will understand. I created snippet to illustrate each step – Temani Afif Oct 18 '20 at 15:16
  • I don't understand how can left or right slice be bigger than the image itself? Your answer is about linear-gradient which allows you to specify left and right size, but when dealing with image, you can't just change the left or right side of an image. Border-image-width specifies both sides of the image, not only left or the right. Do you mean to say that, when the sliced out part is larger than the displayed part, then the sliced part appears in the edge regions? Is that what you meant to say? –  Oct 18 '20 at 15:21
  • your image is 90px width, your slice is 45 (which is 45px) so the left is 45px and the right is 45px which give us a total of 90px so nothing for the middle part ... linear-gradient or image is the same thing, the same logic apply – Temani Afif Oct 18 '20 at 19:17
  • Thanks, but about the linear-gradient, what is the width of the linear-gradient? I am experimenting with linear-gradient, and it seems to be way bigger size than the image. At border-image-slice: 900, the edge regions get filled. So i am guessing the linear-gradient image is at least 1000px? How can i know its width? –  Oct 19 '20 at 08:21
  • it's the width of your element – Temani Afif Oct 19 '20 at 08:47
  • I read your answer on linear-gradient, but the explanation that the size of the linear-gradient is the size of the element doesn't add up to what i am seeing. So, i specified a width of 500px to my element, and then kept reducing the border-image-slice, and discovered that the edge regions get filled at exactly 356. So, how does that add up? If the width of the image is 500px, then 500 - 356 = 144 x 2 = 288, which is not larger than 500, so why does it fill the edge regions then? Am i doing the math wrong, or am i misunderstanding something? –  Oct 19 '20 at 09:36
  • Note that, i am referring to border-image-source: linear-gradient, not just linear-gradient. –  Oct 19 '20 at 09:36
  • share the code your are using here: https://jsfiddle.net/ so I can verify the math – Temani Afif Oct 19 '20 at 09:40
  • Here you go: https://jsfiddle.net/gfrz368y/ –  Oct 19 '20 at 09:43
  • in that example you get a fill at less than 285 ... starting from 285 there is no fill because the width of your element is 500px + 2*25px + 2*10px = 570px and 570px/2 = 285px ... not sure how you get the value 356 – Temani Afif Oct 19 '20 at 09:49
  • I am confused. When you reduce the border-image-slice to 356, the edge regions get filled. At 357, they remain empty. Is that not what happened to you? Do you perhaps mean a full fill of the edge regions? Here's a snapshot to illustrate what i mean: https://imgur.com/a/Q8pXEkt –  Oct 19 '20 at 09:56
  • what browser are you using? – Temani Afif Oct 19 '20 at 09:58
  • Google Chrome. Version 86.0.4240.75 (Official Build) (64-bit) –  Oct 19 '20 at 10:04
  • I will be AFK for about 30/40 min. Will respond as soon as i get back. –  Oct 19 '20 at 10:04
  • the result you are getting doesn't make sense, it's a bug or something else. Try with a different browser. I am also using Chrome and the logical result considering math is 285 ... 356 means that your width need to be at least 2*356 = 712px which is clearly not the case – Temani Afif Oct 19 '20 at 10:33
  • Okay - and just to be clear, the edge region image width is calculated by merging the sliced parts of the top-left corner's image's right side plus the sliced parts of the top-right image's left side, is that correct? Because if we take for example the top-left corner image, as you slice it, the parts that get sliced are the right and bottom sides, and for the top-right image, it's the left and bottom parts. So, it's when the total sum of the sliced parts of the right side of the top-left image plus the sliced parts of the right side of the top-right image exceed the width of the source image? –  Oct 19 '20 at 11:13

0 Answers0