IT lexicon › Programming › Nine-slice scaling

Nine-slice scaling

Programming På svenska → Updated: 2026-10-24

Scaling a 2D image by dividing it into nine regions, where the corners keep their size while the edges and centre stretch — so a panel can grow to any size without warping its frame.

Plainly scaling up a button or window image smears rounded corners and a neat border into mush. Nine-slice fixes it with a 3×3 grid: the four corners are drawn unchanged, the four edges stretch only along their own axis, and the centre stretches both ways. The result is crisp corners and an even border at any final size, from a small button to a wide dialog.

The technique is the backbone of almost every game UI toolkit and builds on a single small sprite. Android formalised it as NinePatch, where an extra one-pixel border in a .9.png file marks which areas may stretch — the same idea, baked into the image format.

← Back to the lexicon