Round Image Corners: 6 Methods With Exact Settings

Sharp rectangles look clinical. Rounded corners make images feel modern and polished — the fastest way to get that card-style look you see across Apple, Google, and every well-designed product page.

This is different from cropping an image into a circle, which removes everything outside a circular boundary. Rounding corners preserves the full rectangle — you just soften the 90-degree edges into smooth curves.

Quick Reference: Methods Compared

If you are building a webpage, CSS is the answer — no image editing required. If you need a rounded-corner image file for a presentation, email, or print layout, use the tool you already have open. If you want the fastest path with zero installs, Pixotter's crop tool handles it in the browser.

Radius Guide: How Much Rounding to Use

Before picking a tool, decide how much rounding you want. The radius value controls the curve — a small radius barely softens the corners, while a large one creates a pill shape.

Rule of thumb: 8 px is the minimum anyone notices. 16 px is the sweet spot for card layouts. Above 24 px starts eating into image content at smaller sizes.

Round Image Corners With CSS

CSS border-radius rounds corners at render time without modifying the source file. You can change the radius, animate it, or make it responsive — no re-exporting needed.

img.card { border-radius: 12px; }        /* Card-style */
img.hero { border-radius: 24px; }        /* Prominent */
img.pill { border-radius: 50%; }         /* Pill shape */
img.top  { border-radius: 16px 16px 0 0; } /* Top corners only */

The per-corner shorthand follows clockwise order: top-left, top-right, bottom-right, bottom-left.

If your image overflows its container, wrap it and add overflow: hidden:

<div style="border-radius: 16px; overflow: hidden;">
  <img src="product-shot.webp" alt="Product screenshot with rounded corners" />
</div>

Browser support: Chrome 4+, Firefox 4+, Safari 5+, Edge 12+. No vendor prefixes needed since 2012.

To add a visible border that follows the curve, use box-shadow: 0 0 0 3px #color — see our add border to image guide for all border methods.

Round Image Corners in Photoshop 26.3

1. Open your image in Photoshop 26.3.
2. Select the Rounded Rectangle Tool (U) and set the corner radius in the options bar (16 px for card-style).
3. Draw the shape over the image area you want to keep.
4. Drag the image layer above the shape, then right-click it and choose Create Clipping Mask (Alt+Ctrl+G / Option+Cmd+G).
5. Export via File → Export → Export As — PNG preserves transparent corners, JPG fills them with a background color.

The mask is non-destructive: double-click the shape layer to adjust the radius any time. For app icon previews, set the radius to 22.37% of the icon width (229 px on a 1024×1024 canvas). See our app icon size guide for platform dimensions.

Round Image Corners in GIMP 2.10.38

GIMP has a built-in filter for this — no plugins needed.

1. Open your image in GIMP 2.10.38.
2. Go to Script-Fu → Decor → Round Corners.
3. Set Edge Radius in pixels (16 for card-style, 24 for prominent).
4. Uncheck Add drop shadow unless you want one. Uncheck Add background to keep transparent corners.
5. Click OK — GIMP creates a new image with rounded corners.
6. Export via File → Export As → save as PNG to preserve transparency.

The filter creates a new image, leaving your original untouched. If Script-Fu is missing from your menu, verify you are running the full GIMP 2.10.38 package — the filter ships with all standard installs including Flatpak and Snap builds.

Round Image Corners in Figma 124

1. Import your image into Figma 124 and select the layer.
2. In the Design panel, find Corner Radius and enter your value (8 for subtle, 16 for card-style, 24 for prominent).
3. For per-corner control, click the independent corners icon and set each corner separately.
4. Export: select the frame → Export → PNG or SVG.

If rounding does not appear, wrap the image in a Frame first (Ctrl+Alt+G / Cmd+Option+G). The radius applies to the frame, not bare image layers.

Figma is ideal when you are already in a UI design workflow. For favicon and app icon exports, match the radius to the target platform's spec.

Round Image Corners With ImageMagick 7.1.1

ImageMagick handles rounding from the command line — useful for automation and batch jobs.

magick input.png \( +clone -alpha extract \
  -fill white -colorize 100 \
  -fill black -draw "roundrectangle 0,0 %[fx:w-1],%[fx:h-1] 16,16" \
  -fill white -draw "roundrectangle 0,0 %[fx:w-1],%[fx:h-1] 16,16" \
  \) -alpha off -compose CopyOpacity -composite output.png

The roundrectangle primitive uses the format x1,y1 x2,y2 rx,ry — change 16,16 to your desired radius. To batch-process an entire directory:

for img in *.png; do
  magick "$img" \( +clone -alpha extract \
    -fill white -colorize 100 \
    -fill black -draw "roundrectangle 0,0 %[fx:w-1],%[fx:h-1] 16,16" \
    -fill white -draw "roundrectangle 0,0 %[fx:w-1],%[fx:h-1] 16,16" \
    \) -alpha off -compose CopyOpacity -composite "rounded_${img}"
done

These commands require ImageMagick 7.1.1+ (the magick command). On v6, replace magick with convert, though upgrading is recommended — v6 hit end-of-life in 2023.

Need to resize images before rounding? Chain -resize before the rounding step, or use Pixotter for browser-based batch resizing.

Round Image Corners With Pixotter

If you do not want to install anything or write any code, Pixotter rounds corners in the browser with zero setup.

1. Open pixotter.com/crop/.
2. Drop your image onto the page.
3. Adjust the corner radius slider to your preferred value.
4. Click Download — your rounded-corner image saves as PNG with transparent corners.

All processing runs locally via WebAssembly. Your images never leave your device. No account, no signup, no watermark.

For batch jobs, drop multiple images at once. Pixotter applies the same radius to every image in the set.

Use Cases

• App screenshots — 16–24 px rounding makes screenshots look like they belong on a polished landing page.
• Product mockups — Subtle 8 px rounding on e-commerce product images softens edges without looking like a sticker.
• Social media cards — Pre-rounding Open Graph images prevents quality loss from platform auto-rounding on Twitter/X and LinkedIn.
• Profile pictures — Slack workspace icons use a rounded square ("squircle"). For full circles, see our circle crop guide.
• iOS app icon previews — Apple uses ~22.37% of the icon width as the corner radius. See our app icon size reference for exact dimensions.

FAQ

What is the difference between rounding corners and cropping a circle?

Rounding corners softens the edges of a rectangular image. Cropping to a circle removes everything outside a circular boundary. Use rounded corners for cards and screenshots; use circle crops for profile pictures and avatars.

What corner radius should I use for a card-style look?

16 px. Material Design 3 uses 12 px, Apple's HIG uses 10–20 px. Start at 16 px and adjust — smaller images look better with smaller radii.

Does rounding corners change the image dimensions?

No. The width and height stay the same. Corner areas become transparent (PNG/WebP) or fill with a background color (JPG), but pixel dimensions are unchanged.

Should I save rounded-corner images as PNG or JPG?

PNG if you need transparent corners. JPG if the image sits on a known background color — smaller file, but transparent areas fill with white. WebP gives you transparency at better compression than PNG.

Can I round just one or two corners?

Yes. CSS border-radius supports per-corner values. In Figma, click the independent corners icon and set specific corners to 0. In Photoshop, use the Direct Selection Tool (A) to drag individual corner points sharp.

How do I keep transparent corners without a white background?

Export as PNG or WebP — both support alpha transparency. In GIMP, uncheck "Add background" in the Round Corners dialog. In Photoshop, export as PNG with transparency enabled.

Does rounding corners affect image quality?

No. The image interior is pixel-for-pixel identical to the original. Only the corner pixels change, transitioning from opaque to transparent along the curve.

How do I add a border around a rounded-corner image?

In CSS, box-shadow: 0 0 0 3px #color follows the border-radius curve. The border property also respects border-radius. See our add border to image guide for all methods.