Rounded-Corner Image Mask
Rounded-Corner Image Mask: Applies globalCompositeOperation 'destination-in' with vector clipping path to preserve transparency outside the mask.
About this rounded-corner image mask
Apply a fixed rounded-rectangle clip to one image and export transparent PNG.
How this tool works
Implements client-side Rounded-Corner Image Mask operations. Applies globalCompositeOperation 'destination-in' with vector clipping path to preserve transparency outside the mask specifically designed for a ui developer masks a rectangular photo into a rounded-corner pill or star shape.
- Image Dimensions & Aspect Ratio Analysis: Computes source width, height, and greatest common divisor (GCD) to determine natural aspect ratio.
- Coordinate Transform Mapping: Maps crop rectangles [x, y, width, height] onto canvas coordinate systems, clamping to boundary limits.
- Affine Transformation & Resampling: Applies translate/rotate matrices or draws image slices using hardware-accelerated canvas resampling.
- Multi-Asset Icon Packaging: Generates 16x16, 32x32, 48x48, 180x180, and 512x512 PNG assets bundled into clean downloads.
Worked example
Scenario: Apply the fixed rounded-corner mask to a 240×120 test PNG.
Sample input:
Processing: Canvas clips a rounded rectangle with 14.4px radius.
Illustrative output:
Limits and verification
Prevents upscaling beyond original dimensions when quality preservation is enabled. Crop boundaries are strictly constrained within the natural image bounds [0, 0, width, height] to prevent transparent border bleeding.
Examples demonstrate an expected workflow; they do not prove every input or every branch of an external specification. Check important results with an independent source before using them for money, security, compliance, safety, or irreversible file changes.
Browser processing boundary
Tool input is processed by code running in the browser and is not intentionally sent to a CZOA processing API. The page can still request ordinary site assets, analytics, or advertising when those services are enabled. Browser extensions and managed-device software remain outside this tool's control.
Relevant references
These references govern or help explain the format, protocol, or calculation used here. Listing a reference does not claim certification or complete implementation of every optional feature.
Content owner: CZOA Tools · Last reviewed: 2026-09-15 · Review methodology
How to use it
- Enter, paste, or select your input data into the Rounded-Corner Image Mask workspace controls.
- Review available parameter fields, units, formats, or options configured for your task.
- Click the action button or observe immediate live calculations rendered in your browser runtime.
- Inspect the resulting output and any diagnostic messages, then copy or download the result if needed.
Frequently asked questions
How does Rounded-Corner Image Mask process an image?+
It makes a Canvas matching the decoded image, clips a rounded rectangle with radius min(width,height) × 0.12, then draws the image. Corners outside that fixed rounded rectangle become transparent in the PNG output.
What controls does Rounded-Corner Image Mask provide?+
The page has one image-file chooser and Process locally. There is no shape picker, radius control, circle, ellipse, star, border, feather, background, format, or batch control.
What limits apply to the rounded-corner mask?+
The image must decode in the browser. Radius is fixed from image geometry and the output is a new PNG data URL; it is not an SVG mask, arbitrary vector mask, reversible edit, or preservation of source file metadata.
What does browser-isolation evidence establish for the rounded-corner mask?+
Network requests observed during the example contained no selected-image payload while the fixture independently decoded a PNG with transparent corner and opaque center at the declared 12% radius. This supports only the tested browser value path; resources, extensions, permissions, and other networks are outside the observation.