Add rounded corners to images with adjustable radius and background color.
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.
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.
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.
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.
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.
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.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.