Overview
Introduction
This tool rounds the four corners of every frame's canvas in an animated GIF, entirely client-side, masking each corner to transparent by a chosen radius.
The effect is identical to a CSS border-radius clip, applied consistently to every frame so the rounded shape stays fixed throughout the animation.
What Is GIF Corner Rounder?
A client-side GIF corner-rounding tool that decodes an uploaded animation and, for every frame, zeroes the alpha of any pixel that falls outside a rounded-rectangle mask defined by the requested radius.
The radius is specified as a percentage of the frame's smaller dimension, so it scales proportionally regardless of the GIF's actual size.
How GIF Corner Rounder Works
The radius percentage is converted to a pixel radius based on the smaller of the frame's width/height, then four corner circle centers are computed, one per corner.
For every pixel that falls within one of the four corner squares (sized radius x radius), its distance to that corner's circle center is checked; pixels outside the circle's radius have their alpha zeroed, while pixels along the straight edges and center of the frame are always kept.
When To Use GIF Corner Rounder
Use it to give an animated sticker, badge, or icon a softer, app-icon-style rounded silhouette instead of hard rectangular corners.
It's also useful for matching a GIF's shape to a rounded UI container it'll be displayed inside.
Often used alongside GIF Border Adder, Polaroid GIF Creator and GIF Background Adder.
Features
Advantages
- Radius scales proportionally via percentage, so the same setting looks right across different GIF sizes.
- Applies identically to every frame, keeping the rounded shape stable throughout playback.
- Runs entirely client-side; the uploaded animation is never sent to a server.
Limitations
- Rounding only masks corners to transparent: it doesn't crop the canvas or change its dimensions.
- On a fully opaque source frame, rounding just the corners can look like a cutout rather than a seamlessly rounded photo unless the destination context also renders transparency.
Examples
Best Practices & Notes
Best Practices
- Use a radius between 10-25% for a typical 'squircle' app-icon look; higher values approach a fully circular/oval mask.
- Combine with the GIF Edge Refiner afterward if the rounded corner's curve looks slightly jagged at small sizes.
- Preview the result against the destination background, since the rounded corners will only look clean if transparency is actually rendered there.
Developer Notes
roundGifCorners in gif-corner-rounder.ts maps roundFrameCorners (identical corner-distance-masking geometry to the PNG category's roundPngCorners) across every frame of a DecodedGif, re-deriving the same math per frame rather than importing across categories, consistent with how gif-codec.ts keeps this category's core operations self-contained.
GIF Corner Rounder Use Cases
- Giving an animated sticker or badge a softer, app-icon-style rounded silhouette
- Matching a GIF's shape to a rounded UI container it will be displayed inside
- Softening hard rectangular corners on a screen-recorded animated clip before sharing
Common Mistakes
- Expecting the canvas to shrink: rounding only masks pixels to transparent, it doesn't crop or resize.
- Using a very high radius percentage and being surprised the result looks almost circular rather than subtly rounded.
Tips
- Pair with the GIF Background Adder first if you need the rounded corners to reveal a specific solid color rather than true transparency.
- A radius around 15-20% closely matches common app-icon 'squircle' proportions.