WebToolVerseWebToolVerse
Polish thumbnails & icons

Round Corners

Add rounded corners, a padding canvas, and an optional border ring — perfect for app icons, avatars, and social thumbnails.

Runs entirely in your browser. Your image is never uploaded.

① Drop your image② Pick a preset or adjust sliders③ Download

Preview appears here

Drop an image — rounded corners update live as you adjust sliders.

Quick presets

Adjust

Corner radius

48px

Padding

72px

Border

0px

Background

Export

Quality

92%

Drop an image above to enable download.

Next steps

Make profile photo

Crop, frame, and polish the perfect profile picture in seconds.

Resize image

Resize to exact pixel dimensions or pick from ready-made presets.

Add watermark

Protect your images — add text or logo watermarks with full control.

Crop for social

Get pixel-perfect crops for Instagram, Facebook, X, LinkedIn, and YouTube.

View all tools →
Runs entirely in your browser. No uploads. Your files stay private.

Round Image Corners With A Configurable Padding And Border

Round Corners clips an image with a rounded-rectangle path on a Canvas. The Canvas 2D API's roundRect path method is used where available (Chrome 99+, Firefox 113+, Safari 16+) with a fallback to manual arc() and lineTo() for older browsers. The path is set as a clipping region with clip(), then the source image is drawn through the clip — every pixel outside the rounded shape is left transparent in the export Canvas.
The corner radius slider runs from 0 (a perfectly sharp square) up past the half-shorter-axis value, at which point the shape becomes a full circle (or an ellipse for non-square images). Setting the radius to its maximum is the simplest way to make a circular avatar without switching tools.
Padding adds a coloured border canvas around the rounded image. The implementation grows the export Canvas by the padding amount on all sides and fills the new area with a configurable background colour before drawing the rounded image in the centre. This is what produces the iOS/Android app-icon look — a small image floating on a coloured card.
An optional border ring is drawn between the image edge and the outer canvas. The border uses Canvas's stroke method on the rounded-rect path with configurable colour and thickness; multiple borders are not supported (use Photo Editor for that), but a single coloured ring covers most common cases.
The export is rendered at the original image's full resolution. Padding and border thickness are calculated as fractions of the source dimensions, so a small thumbnail and a 4K source produce visually consistent results — the relative proportions stay the same. There is no hidden downscaling step.
PNG output preserves the transparent corners of the rounded shape; JPEG and WebP either flatten against the configurable background colour or, for WebP, optionally preserve alpha. PNG is the default because the most common use cases (app icons, profile pictures) want true transparent corners.
Everything runs locally. The image is decoded into a Canvas in your tab, the rounded path is set as a clip, the padding and border are drawn around it, and the export is downloaded directly. There is no upload step and the tool works offline once the page is cached.

Common Use Cases

01

iOS and Android app icon look

Apply soft rounded corners and a coloured padding canvas to a flat image so it matches the visual language of mobile app icons.

02

Social media card thumbnails

Add a rounded card look to screenshots or product photos for cleaner Twitter cards, LinkedIn shares, and Discord embeds.

03

Circular avatars with rings

Set the radius to maximum on a square image to get a circular crop, then add a coloured ring to mimic the highlight-style look on Instagram.

04

Blog and editorial header images

Add subtle rounded corners with a light padding background for a modern editorial card style on Substack or Ghost.

Frequently Asked Questions

Canvas's roundRect path method draws a rectangle with rounded corners; the path is set as a clip with clip(), then the source image is drawn through the clip. Pixels outside the rounded shape end up transparent in the output.
Set the radius to its maximum value (effectively half the shorter axis). On a square image this produces a perfect circle; on a non-square image it produces an ellipse. For a guaranteed circle, square-crop the source first with Profile Picture Maker.
Yes. Choose PNG output (or WebP with alpha) and the corners outside the rounded shape stay truly transparent. JPEG flattens transparency against the configured background colour.
Only the final encode does. The Canvas pass uses the source bitmap at full resolution — no downscaling, no resampling, no quality reduction in the rounding step itself. PNG output is fully lossless.
Yes. Set padding to 0 and use the border slider. The border is drawn on the rounded-rect path between the image edge and the outer canvas.
Up to about 50 megapixels on desktop browsers. Mobile Safari is tighter, so very high-resolution images may need to be downscaled with Image Resizer first.
No. Everything runs locally — the decode, the rounded clip, the padding, the border, and the export. No image bytes leave your browser.
Canvas roundRect is widely supported (Chrome 99+, Firefox 113+, Safari 16+). On older browsers the tool falls back to manually drawing the rounded path with arc() and lineTo() calls, which produces an identical result.
Yes. JPEG bytes are parsed for the orientation tag before drawing, so a portrait phone photo is rotated upright before the rounded corners are applied.
Yes. Logos with transparent backgrounds keep their alpha through the rounded crop because the clip operation is alpha-aware. The rounded shape applies on top of the logo's own transparency.

Advertisement