Rounded Corner Maker

Add rounded corners to images with adjustable radius and background color.

Tested tool guide Tested browser tools Checked August 16, 2026

What Rounded Corner Maker does, with a checked example

Rounded Corner Maker takes an image and cuts the four corners of its rectangular frame into quarter-circle arcs with a radius you choose, then fills the removed slivers with a background color you also choose. The radius value is a pixel measurement: at 40 px the curve spans 40 px along each edge from the corner. The surprise for most users is that the cutaways are filled with an opaque color rather than left transparent, so the result looks seamless only on a page whose background matches that color.

Worked example

A concrete input and expected output from the current implementation.

Input

Upload a 400 by 300 px PNG, set radius to 40 px, background to white (#FFFFFF).

Expected output

A 400 by 300 px PNG in which each corner is cut to a quarter-circle arc of radius 40 px. The four slivers between those arcs and the image edges are solid white; every pixel inside the rounded rectangle is unchanged. Along each edge the curve begins 40 px in from the corner.

The radius defines the quarter-circle removed from each corner, and the cutaway is filled with the chosen background color. The output keeps the original dimensions, and only the four corner regions differ from the input.

How the result is produced

Radius and the cut

The radius is measured in pixels and is the radius of the quarter-circle removed from each of the four corners. The cut is a true circular arc, so the corner curve is smooth at any setting: at 40 px the arc starts 40 px in from the corner along each edge, and a radius of 0 changes nothing.

Background fill and output

The slivers removed from the corners are filled with the single background color you choose, and all remaining pixels are left untouched, so the output keeps the original dimensions. The work happens entirely in the browser on the copy of the image you loaded; the original file is not modified and nothing is uploaded.

Good uses

Matching images to rounded UI cards: a product screenshot or photo destined for a rounded-corner card on a web page, so the image itself carries the curve instead of relying on the card to clip it.
Profile photos and avatars for services that only offer square or circle crops, when a soft rounded-rectangle look is wanted.
Preparing photos for slides, documents, or thumbnails where square corners look harsh next to rounded design elements.

Limits and checks

The background color fills the cut corners, so the result is seamless only where it is placed on a background of that exact color; against anything else the corner blocks are visible.
The radius is absolute pixels, not a proportion: 40 px is a gentle curve on a 2000 px photo but a heavy cut on a 100 px thumbnail, so the same value reads differently at different sizes.
The tool rounds the image's rectangular frame only. A subject that touches an edge of the photo is cropped by the curve like any other pixel; the tool does not detect or avoid content.

Common questions

Will the corners come out transparent?

No, not by default: the tool fills the cutaways with the background color you choose, producing an opaque result. If you need true transparency, match the background color to the page the image will sit on, or use a tool that outputs an alpha channel.

Do all four corners get the same radius?

Yes. A single radius value is applied identically to all four corners; there is no per-corner control, so you cannot round only the two top corners or give one corner a tighter curve. For asymmetric corners, apply the rounding in CSS or an image editor instead.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.