1 <p>Compare the following two images:</p>

2 <p>You can set the same margins for the slicing lines of 50px to slice the first image. This is clearly not enough for the second image, since it is less symmetrical.</p>

3 <p>You can set different margins for the slicing lines using border-image-slice. To do this, you need to assign space-separated values in the following order: top, right, bottom, left. Example:</p>

4 border-image-slice: 10 20 30 40;<p>The middle part of the image is usually not used. But if you add the keyword fill to the property value, then the middle part of the image will be displayed in the middle area of the frame: It will cover the background of the block, but it will not cover up the content. Example:</p>

5 border-image-slice: 10 20 30 40 fill;