Border image

Example adapted from: w3schools; please refer to this documentation.

This is the original image (81px x 81px):

Border image

and this is the image with a superimposed grid:

Border image with grid

borderImg1

The corners are obtained slicing off squares 1, 3, 7 and 9. The orange squares are obtained by replicating squares 2 and 8 (horizontally) and 4 and 6 (vertically). There are incomplete squares on all corners.

borderImg2

The corners are obtained slicing off squares 1, 3, 7 and 9. The orange squares are obtained by replicating squares 2 and 8 (horizontally) and 4 and 6 (vertically). Rounding in the dimension of the orange squares is used to have complete squares only.

The image used is not exactly simmetrical - hence the squares merge one into the other.

borderImg3

The corners are obtained slicing off squares 1, 3, 7 and 9. The orange squares are obtained by replicating squares 2 and 8 (horizontally) and 4 and 6 (vertically). Rounding in the dimension of the orange squares is used to have complete squares only.

The image used is not exactly simmetrical - but it's sliced more precisely than in the previous examples so the squares do nor merge one into the other..

borderImg4

The corners are obtained slicing off squares 1, 3, 7 and 9. The orange squares are obtained by extending squares 2 and 8 (horizontally) and 4 and 6 (vertically).