Round Corner Image Generator

What makes this rounder different: every corner can carry its own radius, the radius can be expressed in pixels or as a percentage of the shorter side, and the corner itself can be a plain rounded arc, a smooth squircle, a straight bevel or an inward scoop. The tool also prints the matching CSS border-radius rule, so the same shape can be reproduced in code instead of as a file.

Why round the corners of an image?

How to Add Rounded Corners to an Image

1. Load your image. Drag a file onto the drop area or choose Select Image. JPG, PNG, WebP, GIF, BMP, AVIF and SVG all work as long as your browser can decode them.
2. Set the radius. Drag one of the round corner handles on the preview, move the Corner radius slider, or type an exact number and switch the unit between px and %.
3. Choose a corner style. Rounded, Squircle, Bevel or Scoop. Turn off Link all corners to give each corner its own value, arranged on screen exactly like the corners they control.
4. Add padding, a background or a border, if you want one. Padding grows the canvas around the picture, the background fills it, and the border ring follows the rounded outline instead of the old rectangle.
5. Download. Keep PNG for see-through corners, then click Download Image. The panel reports the exported dimensions and file size, and the CSS box shows the equivalent stylesheet rule.

Radius in pixels or in percent

A radius in pixels is absolute: 32 px is 32 px whether the image is 400 or 4000 pixels wide, so the same value looks dramatic on a small thumbnail and barely visible on a large photo. A radius in percent is measured against the shorter side of the image, so it scales with the picture and looks the same on every export. 50% is the maximum useful value, and it produces a circle on a square image and a pill on a rectangle.

The four corner styles

• Rounded — a quarter circle, the same geometry a browser draws for border-radius. Predictable, and the only style that maps one-to-one onto CSS.
• Squircle — a superellipse-style corner. The curve starts further along each edge and flows into the straight side without the sudden change in curvature a circle has, which is why app-icon guidelines on iOS and Android use this shape.
• Bevel — the corner is cut off by a straight diagonal. Sharper and more technical than a curve, and it stays crisp at small sizes.
• Scoop — the arc curves inward, removing a concave bite. Two scooped corners on opposite sides read instantly as a ticket or a tag.

Choosing the output format

Because JPG has no alpha channel, exporting one fills the cut-away corners with the chosen background colour instead of leaving them empty. That is often exactly what you want — a white rounded photo on a white page — but it is not transparency, and it cannot be undone later.

Key features

• Private by design: the file is read with the browser FileReader API and drawn on a canvas locally. It is never uploaded.
• Drag-the-corner editing: pull a handle diagonally on the preview and watch the radius follow your finger or cursor.
• Per-corner control: round only the top two corners, or scoop one side and leave the rest square.
• Preview backgrounds: flip between a transparency checkerboard, white, dark and a colour gradient to check the alpha edge before you download.
• Padding, background fill and a border ring that all follow the same rounded outline.
• Output scale: export at the original resolution, or shrink to 75%, 50% or 25% in the same pass.
• Copyable CSS: the generated border-radius rule reproduces the same shape in a stylesheet when a file is not the right answer.
• Anti-aliased edges: the corner is drawn as a clipping path, so the curve stays smooth instead of showing a stair-stepped jaggy edge.

Image file or CSS?

If the rounded picture is going into a slide deck, a PDF, an email signature, a marketplace listing or any tool that will not run your stylesheet, you need a real file with real transparency — export a PNG. If it is going onto a web page you control, a CSS rule is lighter, stays sharp at any size and is easier to change later; copy the snippet instead. The two are not exclusive: many teams ship the PNG for external use and the CSS for the site.

Troubleshooting

• The corner looks jagged: the source is probably already small. Round at the largest available resolution, then scale down, rather than rounding an image that has been enlarged.
• A thin light halo appears on a dark background: the image had a white matte baked in. Add one or two pixels of padding in a matching colour, or increase the radius slightly so the halo is cut away.
• The download opens as a white square: the format is JPG or the background is not set to Transparent. Switch the output format to PNG.
• A very large photo feels slow: the canvas redraws the full-resolution image on every slider move. Let go of the slider and give the browser a moment, or reduce the output scale.
• An animated GIF loses its animation: canvas exports a single frame. Only the first frame is rounded and saved.

Frequently Asked Questions

Is my image uploaded to a server?

No. The file is read by your browser with the FileReader API and drawn onto an HTML canvas on your own device. Nothing is sent to miniwebtool, so private screenshots, client artwork and personal photos never leave your computer. The page itself still needs an internet connection to load.

Why do my rounded corners look white or black instead of transparent?

Only PNG and WebP can store transparency. If you export JPG, the format has no alpha channel, so the cut-away corners are filled with the background colour instead. Choose PNG in the Output format list and set the background to Transparent. If the corners still look wrong, check that the app or website you paste into supports alpha, because some editors flatten PNG transparency onto white.

How do I make a perfectly circular image?

Switch the radius unit to percent and set the radius to 50%. On a square image that produces a perfect circle. On a rectangle it produces a pill or stadium shape, because a percentage radius is measured against the shorter side. Use the Circle preset to crop to a square and round it in one click.

What is the difference between rounded, squircle, bevel and scoop corners?

Rounded is a plain quarter circle, the same shape CSS border-radius draws. Squircle spreads the curve further along each edge so the join is smooth and continuous, which is the look used by iOS and Android app icons. Bevel cuts the corner off with a straight diagonal line. Scoop curves inward instead of outward and carves a concave bite out of each corner, which suits tickets, coupons and badges.

Does the radius in pixels match the CSS border-radius on my website?

The radius is applied in the image's own pixels, so it matches CSS only when the image is displayed at its natural size. A 1200 pixel wide export shown in a 600 pixel wide column is scaled by half, so a 48 pixel radius looks like 24 pixels on screen. Use the percent unit for a size independent result, or copy the CSS snippet the tool generates, which already reports the scaled equivalent.

Can I keep the image quality and the original resolution?

Yes. The export keeps the original pixel dimensions unless you change the output scale or add padding, and PNG is lossless, so nothing is recompressed. Only the corner pixels change, from opaque to transparent. WebP and JPG are lossy, so use them when file size matters more than an exact copy of the source pixels.