Image Border
Add decorative borders, frames, and rounded corners to images.
Image Border draws decorative borders, frames, and rounded corners around a photo — "Add decorative borders, frames, and rounded corners," as the card says. Border Width (1–100), Border Radius (0–200), Border Color, and Style (Solid, Double, Dashed, Dotted) are the four controls; defaults are a 10px solid black edge with no radius.
The canvas expands by borderWidth × 2 on each dimension so the stroke sits outside the original pixels, and the result panel compares Original vs Result sizes before you download. Radius > 0 also clips the image corners to the rounded path. Everything is local canvas drawing — no upload, no AI.
How it works
The canvas grows by borderWidth*2 in each dimension. Solid/Dashed/Dotted stroke the expanded path with style-specific lineDash patterns — dashed uses [bw*2, bw], dotted uses [bw, bw]. Double style fills the outer band, punches the inner rect with destination-out, then strokes an inner line for the double-rule look.
When radius > 0 the path becomes a rounded rectangle and the image draw is clipped to it (with minor path differences on the double style). Export via toBlob: PNG stays PNG, other sources re-encode as JPEG 0.92. State lives in Redux borderSlice; toasts report "Border applied!" or "Error applying border".
How to use
- Open Image Border and drop an image into the upload zone.
- Confirm the preview and use the overlay reset control if you picked the wrong file.
- Set Border Width (1–100), Border Radius (0–200), Border Color, and Style (Solid/Double/Dashed/Dotted).
- Leave defaults (10px solid black, radius 0) or dial in a custom frame look.
- Click Apply Border (label becomes Applying...).
- Compare the Original and Result size stats — each dimension grew by 2× border width.
- Download the bordered image or click Start Over to reset.
Tips
- Double style simulates a double rule; dashed and dotted use width-relative dash patterns so they scale with Border Width.
- Radius > 0 also clips the image corners — the rounded path applies to the photo, not just the stroke.
- Output dimensions are always image + 2×borderWidth — plan for the growth when targeting exact sizes.
- Thick borders plus a large radius make quick framed social-post graphics.
- Transparent rounded corners survive only on PNG outputs; JPEG fills encode without alpha.
Image Border FAQ
Does the border add to the dimensions?
Yes — the canvas is the image size plus 2×borderWidth on each dimension.
Can corners be transparent with a radius?
Only when the output keeps alpha — PNG sources preserve transparency outside the rounded path; JPEG encodes without alpha.
Which styles are available?
Solid, Double, Dashed, and Dotted.
Is the image uploaded?
No — canvas stroke rendering runs entirely in the browser.
Can I change the color after applying?
Apply again with the new settings, or click "Start Over" and redo the workflow.
Credits
- Canvas 2D API — Stroke styles and rounded-rect clipping