How 9-slice scaling makes one menu frame fit any page

A decorative border can make a menu feel finished. The problem is that one menu rarely lives at one size. The same design might print as US Letter, export as A4, and show up as a tall A5 insert. Stretch a single framed image across all of those and the corners smear, the ornaments squash, and the whole thing looks cheap.

9-slice scaling solves this. It is the technique behind the frames in Menu Author’s editor and PDF export, and it is built right into CSS. Here is how it works, and a live tool to try it.

The core idea: cut the image into nine pieces

Imagine slicing the frame image with two vertical and two horizontal cuts, like a tic-tac-toe board. You get nine regions:

The four corners are never scaled. They are pinned to the corners of the page at a fixed size, so the ornament stays crisp.
The four edges are stretched or repeated along one axis only. The top and bottom edges tile horizontally, the left and right edges tile vertically.
The center is discarded, leaving a transparent hole the page content shows through.

Because corners never scale and edges only tile in one direction, the frame keeps its proportions at any page size.

The CSS: border-image

CSS implements 9-slice directly through border-image. A menu page is just an element with a thick transparent border that the frame image is painted into:

border-style: solid;
border-color: transparent;
border-width: 50px;
border-image-source: url("frame.png");
border-image-slice: 400;
border-image-width: 50px;
border-image-repeat: round;

Two numbers do the real work:

border-image-slice: 400 says “cut 400 pixels in from each edge of the source image to find the corners.” That is the frameSlice in the tool below.
border-image-width: 50px is how thick the rendered frame is on the page. That is frameWidth.

The ratio between them is the scale. With a 400px slice rendered at 50px, the frame is drawn at one eighth of its source size, so a 1200px source frame stays sharp even when shrunk.

Why repeat: round

border-image-repeat controls how the edges fill the space between corners. stretch smears a single slice across the whole edge, which distorts repeating motifs. repeat tiles at a fixed size but can clip a partial tile at the end. round tiles and subtly rescales so a whole number of tiles always fits. For a menu frame with a repeating pattern, round keeps every motif intact, which is why it is the default in the tool.

Designing a frame asset that slices well

A frame image behaves under 9-slice only if it is built for it:

Make the source square and large, for example 1200 x 1200, so it scales down cleanly.
Keep all corner artwork inside the slice inset. If frameSlice is 400, the corner ornament must fit within 400px of the corner.
Make the straight edge sections tileable, so repeated copies line up.
Leave the center fully transparent so the menu content shows through.

When it breaks

9-slice has two failure modes worth guarding against. If frameSlice * 2 is greater than or equal to the source dimension, the four corners overlap and there is no edge left to tile. If frameWidth * 2 is greater than or equal to the page dimension, the frame consumes the whole page and there is no content area. Menu Author validates both before rendering, and the tool below shows a warning when either happens.

Try it

Upload your own frame (a 1200 x 1200 PNG with a transparent center works best), or use the bundled example. Change the slice and width and switch between page sizes, and the preview scales to fit while keeping the page proportions.

Frame asset

Click or drop a frame image

Expected source: 1200 x 1200 px

Slice and width

frameSlice (source pixels)

Distance from each edge of the source where the corners end. Same value on all four edges.

frameWidth (page pixels)

Rendered frame thickness on the page. Scale = frameWidth / frameSlice.

Page

Preset

Page size (px), synced with preview

Page background

Opacity

Computed CSS

Source with frameSlice guides

Preview, scaled to fit

This is the exact model the Menu Author editor uses, so a frame you design and test here behaves the same way on a published web menu, a printed PDF, and a QR menu. Start building a menu to put it to work.