Add borders, Polaroid frames or 1:1 and 4:5 social bars, with a solid colour or a blurred backdrop, all in the browser.
A border solves three distinct problems, and each one asks for a different mode. Expanding the canvas grows the final dimensions and surrounds the whole original image with the border colour, the mode for actually framing something, gallery- or Polaroid-style. The inner margin keeps the original dimensions and shrinks the image inside the border, scaling uniformly on both axes so the aspect ratio is never squashed, useful when the output size must stay fixed. And the social frame pads a rectangular photo out to a target ratio (1:1, 4:5, 16:9) with colour bars or a blurred copy of the image itself, which is how you post a landscape shot to Instagram without cropping the edges. Everything is drawn locally with the Canvas API; the image is never sent to a server.
In expand mode, the original image is 100% preserved and gains a frame around it: if the photo is 1000×800 and you add a border, the final file is larger than 1000×800. It is the right mode when you do not want to lose any content, the classic photo framing.
In inner-padding mode, the final dimensions equal the originals: the border is painted over the outer strip of the image itself, covering part of it. It is the mode for when the output size must be exactly the same, due to a layout constraint or a fixed-size slot.
Example 1, gallery-style frame: a light photo on a white-background site fades at the edges. A thin light-gray or black border in expand mode separates the image from the background and gives a "framed" finish.
Example 2, uniform catalog: to make products look consistent, apply the same border color and (proportional) thickness to every photo. A white border in expand mode over a white background creates standardized breathing room around each product.
Thickness is set as a percentage of the image's shorter side, not fixed pixels. That is deliberate: 5% produces a visually equivalent border on both a thumbnail and a huge photo, without recalculating the value for each image.
The output format follows the use: for a solid-color border, JPG works and yields a smaller file; if the image had transparency you want to keep outside the border, choose PNG. For frames with rounded corners or transparency, the round-corners tool is the better fit, since it exports PNG with an alpha channel.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/add-image-border"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Add Image Border"
></iframe>Expand grows the final dimensions and surrounds the whole image with the border. Inner margin keeps the original dimensions and shrinks the image to fit inside the border, preserving the aspect ratio (nothing gets squashed). Social frame pads the photo out to a target ratio (1:1, 4:5, 16:9) with colour bars or a blurred copy, computing the asymmetric padding for you.
The border is applied entirely in your browser. No image is sent to any server.