Add border to image
Choose a picture, set the border width and color, optional padding, corner radius and shadow, and watch the preview. The output size is shown before you download a PNG, WebP or JPG. Everything is drawn in your browser.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose a picture.
- Set the Border width and Border color. Add Padding and its color if you want a mat between the picture and the frame.
- Set a Corner radius to round the outer corners, and switch on Drop shadow to adjust blur, offset and strength.
- Pick PNG, WebP or JPG and download.
How it works
The result is drawn on a canvas: first the outer rounded rectangle in the border color, with the shadow if it is on, then the padding rectangle inset by the border, then the picture, clipped to the remaining rounded shape. The preview is a scaled copy; the download is drawn at full size. Very large results (above about 120 million pixels) are refused.
Worked example
A 1200 × 800 photo with a 24 px white border and a 12 px corner radius gives a 1248 × 848 pixel image. With a shadow of blur 20 and offset 8 the canvas grows by 28 pixels on each side, to 1304 × 904.
Tips
- A white border with a soft shadow gives a printed-photo look.
- Use PNG for web graphics with rounded corners.
- To change only the corners without a frame, use the round image corners tool.
Frequently asked questions
What is the difference between border and padding?
The border is the colored frame on the outside. Padding is the space between the picture and the border, filled with its own color, like a mat around a photo. Both add to the size of the result.
How is the output size calculated?
Width plus twice the border plus twice the padding, plus room for the shadow on every side. The room for the shadow is its blur plus the larger of the two offsets. A 100 × 50 picture with a 10 px border, 5 px padding and a shadow with blur 8 and offset 4 becomes 154 × 104 pixels.
How do I keep the corners transparent?
Choose PNG or WebP. The areas outside the rounded corners and around the shadow stay transparent. JPG cannot store transparency, so those areas become white.
Does the picture itself get rounded?
Yes, when the corner radius is larger than the border plus padding, the picture's own corners are rounded by the difference, so it follows the curve of the frame.