Bilderrahmen-Tool

Two settings, and the difference between them

A border is the line around the image. Padding is the space between the image and that line. They are independent, and using both is what produces the matted look of a framed print: a band of one colour immediately around the picture, and a line of another colour outside it.

Using only the border gives a plain frame. Using only the padding gives a mat with no edge. The [msm_tool slug="image-border"] offers both because the combination is what most people are actually after when they say a photograph needs a frame.

The canvas grows — nothing is cropped

Adding a border does not eat into the image. The canvas expands to make room, so the exported file is larger in dimensions than the original by the border and padding on each side.

That matters where the result goes into a fixed space. A 1000-pixel image with 20 pixels of padding and a 4-pixel border comes out at 1048 pixels square, and a slot expecting 1000 will scale it down — making the border thinner than you designed.

Scale the border to the image

A ten-pixel border is a heavy frame on a 200-pixel thumbnail and effectively invisible on a 4000-pixel photograph.

Judge it against the size the image will actually be viewed at, not the size of the file. If the same image serves a thumbnail and a full-width hero, it needs two different borders, or none — which is the argument for doing it in CSS instead.

Padding is the mat, and it does most of the work

A white or off-white band immediately around a photograph is what makes it read as framed rather than as a web element with an outline. Going straight to a coloured line without the mat looks like a table cell.

Gallery convention is a generous mat — considerably more space than feels necessary — with a thin frame outside it. That proportion translates well to screen: something like twenty parts padding to one part border.

Transparency and format

PNG and WebP keep an alpha channel, so a transparent image stays transparent and the padding can be transparent too.

JPEG cannot, so the image is flattened onto the padding colour first. If you add a transparent border and export as JPEG, the result is a solid-coloured band rather than nothing — which is the sensible outcome, but worth knowing before it surprises you.

CSS is usually the better answer

Where you control the page, a border in the stylesheet leaves the file untouched, adapts to any display size, and can be changed without re-exporting anything. It also does not affect the image's dimensions, so nothing downstream needs adjusting.

Bake the border into the file when the image is going somewhere you do not control: an email, a marketplace listing, a social post, a print, or a document someone else will lay out. Everywhere else, let the display do it.

A note on polaroid-style frames

The classic look — even padding on three sides and a deeper band at the bottom — needs uneven padding, which this does not do. Add the even border here and extend the bottom in an editor, or build it in CSS where the four sides can differ.