Corner radius workflow

Round image corners online without turning a quick edit into a design task.

Most people looking for rounded corners are not trying to create artwork. They are trying to make one screenshot, hero image, avatar, or product photo look finished enough to publish. The useful part is not the slider itself. It is knowing roughly how much radius looks natural for the specific image in front of you.

Open the tool See radius ranges

Start from the image's job, not from the biggest radius you can get away with.

Rounded corners work because they remove some of the hard-edged friction around an image. They stop working when they become the whole visual style. A helpful workflow is to ask where the image will live: inside a blog post, on a marketing page, in product documentation, or as a profile asset.

Image type Good starting radius What to watch for
App screenshot 16px to 40px on large captures Too much radius can crop interface detail and make serious product shots feel toy-like.
Blog hero image 24px to 56px depending on width The radius should support the layout, not compete with the headline and surrounding cards.
Avatar 20% to 50% of the image size Profile images can take a much higher radius because the crop is part of the expected visual convention.
Product image 12px to 32px A small radius often feels more premium than a dramatic one, especially in ecommerce grids.

A lightweight workflow that works for most people

Set the radius before anything else

Radius changes the whole visual tone. Get that close first, then decide whether the image actually needs a border, background, or extra spacing.

Zoom out and judge the image at realistic size

A radius that looks subtle at full resolution can look exaggerated once the image is shown smaller inside a web page, a slide, or a product card.

Only add border or padding if the edge still feels weak

Many images need nothing beyond a gentle corner treatment. Extra decoration is useful when the image disappears into the page, not as a default habit.

Cases where rounded corners help immediately

Documentation screenshots

A small radius separates the screenshot from paragraphs and code blocks without making it look like marketing art.

Launch and changelog images

Rounded corners and a thin border can make plain product captures feel intentional enough for public release notes.

Avatars and team photos

Profile assets tolerate much stronger rounding because users already expect them to feel softer and more contained.

Marketplace or gallery cards

A restrained radius helps unrelated images feel consistent when they appear next to each other in a grid.

When not to round aggressively

Exact UI walkthroughs If a screenshot is being used to explain where to click, keep the treatment subtle so interface edges and spacing remain easy to inspect.
Images that already contain rounded frames Double-rounding can make the result look clumsy, especially when a product screenshot already sits inside a card or device frame.
Very small thumbnails Heavy radius on tiny images leaves too little interior content and makes the image read like a sticker instead of a preview.
A good rounded image still feels like the original image. If the style effect becomes the first thing you notice, pull the radius back.

Keep moving