Add Border, Rounded Corners & Shadow

About the Add Border, Rounded Corners & Shadow

Put a border around a photo, logo or screenshot: a solid colour, a gradient or a blurred copy of the photo itself, outside the picture (the image grows) or inside it (the size stays the same), with a different width on each side if you like. Round the corners, add a soft drop shadow and padding, or pick the Polaroid-style preset with its deep bottom edge and an optional handwritten caption.

Sizes can be set in pixels or in percent of the photo’s shorter side, so a whole batch of different-sized photos gets the same look — a 3 % border is 32 px on a 1080 px photo and 90 px on a 12-megapixel one. Rounded corners, shadows and transparent padding are saved as PNG or WebP with real transparency. Everything is drawn in your browser; nothing is uploaded.

Common uses

• White borders that keep a photo from blending into a white page, feed or print.
• Rounded corners and a soft shadow for screenshots, app images and product photos on websites (PNG with transparency).
• Polaroid-style frames with a caption for invitations, scrapbooks and social posts.
• Blurred-photo or gradient frames that match the picture’s own colours.
• The same border on a whole folder of photos, sized in percent so every photo looks alike.

Outside or inside the photo?

• Outside the photo adds the border around the picture: nothing is covered, and the image grows by the border widths (a 1200 × 800 photo with 24 px borders becomes 1248 × 848).
• Inside the photo keeps the exact size and draws the border over the picture’s edges — useful when a website or printer needs a fixed size. The covered strip of the photo is lost.
• A caption needs an outside border: it is written in the bottom border, so make that one deep (the Polaroid-style preset uses 21 %).

Pixels or percent of the shorter side

With px, every image gets the same number of pixels, which looks thinner on large photos and thicker on small ones. With %, lengths are a share of each photo’s shorter side: 3 % is 24 px on an 800 px-high photo and 90 px on a 3000 px-high one, so a batch of mixed sizes looks consistent. The hint under the width shows the pixel value for the photo in the preview.

Corners, shadow and transparency

• Corner radius rounds the outer corners of the framed photo. With an outside border, Photo corners rounds the picture inside the border separately (equal radii minus the border width give evenly curved, concentric corners). Radii that are too large for the image are reduced in proportion, the way browsers handle CSS border-radius.
• The shadow follows the shape of the framed photo, including rounded corners and transparent parts of a PNG. Its blur works like CSS: the visible shadow reaches about 1.5 × the blur value past the shifted edge, and the canvas grows to include it.
• Areas outside rounded corners, the padding and the space around the shadow are transparent unless you choose a padding colour. PNG and WebP keep that transparency; JPG cannot store it, so it is filled with the JPG background colour (white by default).

Border styles

• Solid: any colour.
• Gradient: a linear gradient between two colours across the whole frame, at the angle you set (CSS convention: 0° points up, 90° to the right, 135° from top left to bottom right).
• Blurred photo: the photo itself, enlarged to cover the frame and blurred, optionally darker or lighter — a frame in the picture’s own colours.

Limitations

• Images up to 50 megapixels in, and results up to 16,384 px per side and 50 megapixels out.
• Animated GIFs and WebPs are framed as a single still image (their first frame).
• The photo is redrawn, so metadata such as EXIF camera details and GPS location is not kept; the photo is turned upright according to its EXIF orientation first.
• HEIC/HEIF photos (iPhone) open directly in Safari. Other browsers need the HEIC decoder (1.4 MB, the same one the HEIC to JPG Converter uses): it is downloaded from this site the first time you add a HEIC photo, then the photo is decoded on your device. Framed HEIC photos are saved as JPG (or PNG with transparency).
• One border per pass. For a double border (for example a thin dark line inside a wide white mat), download the result and add the second border to it.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.