Edge Editor

What this tool does

Rounds the corners of an image or GIF or makes it a circle, adds a border, blurs the edge area or fades the edges to transparent. Use it for profile pictures, app icons and card images.

Steps

1. Upload an image or GIF.
2. Set the "Corner radius". Press a preset (Square, Soft, Round, Circle) or move the slider.
3. If needed set the border width and color, the corner blur (strength and area width) and the edge softening (px).
4. To fill outside the corners with a color instead of transparent, turn on that checkbox and pick a color.
5. Choose PNG or WebP to keep transparency and press "Download".

Settings

• Corner radius (0-100%): a percentage of half the shorter side. 100 makes a circle (or a pill shape).
• Border: drawn inside the shape with the width (px) and color. Width 0 means none.
• Corner blur: only a band of "Blur area width" (%) from the edge inward is blurred with the "Blur strength", and the inside stays sharp. Strength 0 means unused.
• Soften edges (px): the edges fade gradually to transparent over that width. 0 means unused.
• Fill outside corners: fills the area cut away by the rounding with the chosen color instead of transparent.

How it works

A rounded rectangle path for the corner radius is made and the image is clipped to it. For corner blur, a sharp copy of the original is laid over a blurred copy of the whole image using a blurred mask of the inner area, leaving only the edge band blurred. For softening, a blurred mask of the shape shrunk inward is multiplied in so alpha decreases gradually. The border is drawn last inside the shape. A GIF gets the same processing on every frame.

Good to know

• The outside of the corners is transparent, so save as PNG, WebP or GIF to keep it. JPG uses the fill color (white if none).
• Edge softening also creates transparency, so in JPG those parts appear in the fill color.
• Your work is gone when you close the tab.