You will find this feature referred to as 9-slice here and there.
- here is what happens when we try to make a border with the
Imagesetting:
Note how the edges and corners get distorted - they get squished!
- when
Boxis used, you get to reserve a percentage of the image (from each side) that will not be affected by stretching / squishing:
The edges are preserved. That .25 margin = 25% of the image in pixels. This image is 540px wide, meaning that 135px (from the left & right edges) will not be be affected by the image resizing. If the image becomes too small (2 x 135px in this case), you will observe distortion again.
why there are 3x3 boxes in the box
The dotted lines indicate the margins mentioned above. If you add a margin from each side, you’ll end up with a grid like in the image. Those margins divide the image into 3x3 regions: hence 9-slice.