About

Adding a border to a bitmap image is a pixel-level operation. The tool composites a new canvas of dimensions W + 2b by H + 2b, where b is the border width in pixels, then draws the source image at offset (b, b). Incorrect border application in batch workflows causes misaligned sprites, broken tiling, and print bleed errors. This tool operates entirely in the browser using the Canvas API at full source resolution. No server upload. No compression artifacts from re-encoding. It supports solid, dashed, dotted, double, and gradient border styles with optional corner radius. Output is lossless PNG or configurable-quality JPEG.

Limitations: very large bitmaps (above 8000×8000 px) may hit browser canvas memory limits on mobile devices. The border is rasterized into the output. It is not metadata or a vector layer. For print work, convert border width from mm to px using your target DPI: px = mm × DPI ÷ 25.4.

Formulas

The output canvas dimensions are computed from the source image and border width:

W_out = W_src + 2 ⋅ b

H_out = H_src + 2 ⋅ b

Where W_src and H_src are original image dimensions in pixels, and b is border width in pixels. The image is drawn at canvas position (b, b).

For print-to-pixel conversion:

b_px = b_mm × DPI25.4

Where b_mm is desired border width in millimeters, DPI is target print resolution (typically 300), and 25.4 is millimeters per inch.

For rounded corners, the corner radius r is clamped:

r_eff = min(r, min(W_out, H_out)2)

This prevents the radius from exceeding half the shorter dimension, which would produce rendering artifacts.

Reference Data

Border Style	Description	Use Case	Canvas Method
Solid	Uniform color fill around image	General framing, print margins	`fillRect()`
Dashed	Repeating dash pattern	Draft/proof marks, design mockups	`setLineDash([12,6])`
Dotted	Repeating dot pattern	Decorative frames, UI thumbnails	`setLineDash([2,4])`
Double	Two parallel lines with gap	Certificate borders, formal documents	Two `strokeRect()` calls
Gradient	Color transition from outer to inner edge	Social media posts, creative framing	`createLinearGradient()`
Rounded Solid	Solid with rounded corners via `arcTo()`	App icons, profile pictures	`clip()` + `arcTo()`

Format	Extension	Compression	Alpha Channel	Max Canvas Size (typical)
PNG	.png	Lossless	Yes	16384×16384 px
JPEG	.jpg	Lossy (quality 0 - 1)	No	16384×16384 px
WebP	.webp	Lossy/Lossless	Yes	16383×16383 px

Print DPI	1 mm in px	5 mm border	10 mm border	25 mm border
72	2.83	14 px	28 px	71 px
150	5.91	30 px	59 px	148 px
300	11.81	59 px	118 px	295 px
600	23.62	118 px	236 px	591 px

Frequently Asked Questions

Yes. The output dimensions increase by twice the border width on each axis. A 1920×1080 image with a 50 px border becomes 2020×1180 px. The original pixel data is preserved without resampling.

Multiply your desired border in millimeters by your print DPI, then divide by 25.4. For a 10 mm border at 300 DPI: 10 × 300 ÷ 25.4 ≈ 118 px.

JPEG does not support alpha channels. Any transparent region is composited against white (or the chosen border color). Use PNG or WebP export if you need transparency preserved in areas outside the border.

The tool automatically clamps the effective radius to half the shorter output dimension. A radius of 500 px on a 200×300 output is reduced to 100 px, producing a pill shape rather than rendering errors.

This tool applies uniform border width on all four sides. For asymmetric padding, you would need to adjust the canvas offset manually. Uniform borders are the standard for print bleed and social media framing.

Browser canvas limits vary. Chrome and Firefox typically support up to 16384×16384 px total canvas area. Mobile Safari may be limited to 4096×4096. The tool warns if the output exceeds safe limits.