Add Border to Image

A border separates a photo from the page, makes social posts look finished, and turns snapshots into something that looks printed. This tool adds solid, inside or double-line borders, rounded corners, a soft drop shadow or a Polaroid-style frame with a handwritten-look caption. Widths can be in pixels or as a percentage of the picture, so a batch of different sizes gets matching frames. Everything runs in your browser.

How to use this tool

1. Choose one or more images.
2. Pick a style and set the width in pixels or as a percentage of the shorter side.
3. Choose the border colour and, for double lines, shadows or captions, the second colour.
4. For rounded corners set the radius; for Polaroid add an optional caption.
5. Download the framed images, or all of them as a ZIP.

Formula

solid, double, rounded: output = (width + 2b) × (height + 2b); Polaroid: (width + 2b) × (height + b + 3.5b); inside: size unchanged

b is the border width in pixels; with the percentage unit, b = round(shorter side × % ÷ 100). The double line splits b into three bands of about b ÷ 3: border colour, second colour, border colour. Rounded corners use a radius of the given percentage of the shorter side of the framed image, and the picture's own corners are rounded to match. The drop shadow adds 2b + b/2 of transparent space on every side for the blur and offset.

Example

A 1080 × 1350 portrait with a 5% border: b = round(1080 × 0.05) = 54 px, so the result is 1188 × 1458 px. As a Polaroid with the same b, the bottom strip is 54 × 3.5 = 189 px and the frame is 1188 × (1350 + 54 + 189) = 1188 × 1593 px.