Corner radius workflow
Round image corners online without opening a design app.
Rounded corners make screenshots, thumbnails, product photos, and app previews feel more deliberate. The trick is not using the biggest radius possible. It is choosing a radius that matches the image size and where the image will be used.
A simple radius rule
For most web images, start with a corner radius around 4% to 8% of the shorter image side. If the image is 1200 x 800 pixels, that means roughly 32px to 64px. For UI screenshots, smaller values often look cleaner because the image already contains buttons, cards, and panels with their own radii.
When rounded corners work best
App screenshots
Use rounded corners to make a plain capture feel more like a product preview.
Blog images
A small radius can help hero images fit modern article layouts without feeling over-styled.
Avatars
Use a high radius for profile images, or 50% if you want a circle-like crop.
Product cards
Pair a modest radius with padding and a neutral background for marketplace-style images.
Docs and tutorials
Rounded screenshots are easier to scan when placed among paragraphs and code blocks.
Social posts
A rounded preview with a soft shadow can stand out without looking like a heavy ad graphic.
Common mistakes
- Using JPG when you need transparent corners. Use PNG or WebP instead.
- Adding a large radius to a small screenshot, which can cut off useful UI details.
- Using a border color that clashes with the page background.
- Forgetting padding when the image needs space around the edges.