Add decorative borders to your images with custom styles
When applying a border, graphic software must make a fundamental decision: do we draw the border over the inner edges of the image (Inset), or do we expand the image outward to make room for it (Outset)?
This tool uses an Outset mathematical model. If you have a 1000x1000 pixel image and request a 50px border, the tool physically expands the underlying HTML5 Canvas bounding box to 1100x1100 pixels.
It draws the solid border color across the entire new canvas, and then paints your original image exactly in the center of that larger rectangle.
By expanding the canvas—rather than using the Canvas API's native strokeRect function to draw lines over the top of the image—we ensure that absolutely zero pixels of your original photograph are covered up by the border. The original content remains 100% visible.
If you add a 10px border to a 500x500 image using the Outset method, what are the final dimensions of the exported file?
