Sharp squares sneak back in three predictable ways
Exporting JPEG always drops alpha. The rounded silhouette looks fine on a checkerboard preview, then lands on a white page with a gray halo where anti-alias met emptiness.
Second slip: stretching radius until the short edge becomes a stadium. Sometimes the goal, often accidental when the slider reads relative to a tiny thumbnail. Third: rounding only on the preview canvas while the download still carries square metadata because nobody hit the save control after a preset.
- Match background fill to the page where the image lands when you give up transparency.
- Compare at one hundred percent zoom after download, not only the scaled preview.
- When the subject touches an edge, cropping first keeps the clip from biting into faces.
Before the slider: two office-week scenarios
Monday: a 1080 square team photo for an internal wiki. Editors want twelve pixel corners on every side, white fill because the wiki theme is off-white. Here you lock all corners, set twelve, choose white, export JPEG, done in under a minute.
Thursday: a PNG logo with transparency for a dark landing page. You need only the top pair rounded so the badge hugs a hero image. Switch to the top pair preset, keep transparency, download PNG, place into the handoff folder. If marketing later asks for glow, stack blur on a duplicate layer inside a desktop suite, not on this page.
Tracing the path the browser walks
Your file becomes a bitmap inside a canvas element. The preview copies scaled pixels into a second canvas, fills an optional solid rectangle underneath, builds a rounded rectangle path with quadratic curves at each corner, calls clip, then paints the image again through the mask. Radius numbers you type refer to the original control idea, scaled to the preview width so what you see matches the download proportions.
Why quadratic curves
They approximate circular arcs with fewer operations than true arc segments for this interface. At extreme radii the short side caps so the path never crosses itself.
What quietly breaks
Indexed PNGs with few colors sometimes posterize after a JPEG export. CMYK JPEG sources occasionally decode oddly in Safari. EXIF orientation tags apply on decode, yet the flattened file carries no raw camera profile work. For lens serials, read metadata viewer on the source before you flatten.
Editor stance: We treat this page as a finishing step for web assets, not print separations. For bleed and spot channels, stay inside desktop publishing tools.
PrivacyDecode and draw stay inside the browser tab. Closing the tab clears buffers unless you saved a file.
Color depthCanvas works with eight bits per channel. Wide-gamut masters lose precision once they hit this pipeline.
| Expectation | Verdict |
|---|
| True vector corner on SVG inputs | No. Rasterize SVG to PNG first, then round here. |
| Non-destructive layers | No layer stack. Each run overwrites the preview bitmap. |
| Print-ready bleed | No bleed math. Add margin manually before export. |
| Automatic tone fixes | No. Walk brightness and contrast separately if the frame looks flat. |
