Standard image cropping gives you rectangles. But sometimes you need a circle for a profile picture, a perfect square for Instagram, or rounded corners for a modern design. These shapes require a different approach — one that often involves transparency.
This guide covers how to crop images into different shapes, when each shape is appropriate, and how to handle transparency so your shaped images look right on any background.
Square Cropping
Square crops (1:1 ratio) are the most commonly needed non-standard shape. They're used for:
- Instagram feed posts (1080x1080)
- Profile pictures on most platforms
- Product thumbnails in e-commerce grids
- App icons
How to Crop a Square
- Open BestPNG's image cropper
- Upload your image
- Select the 1:1 aspect ratio
- Position the crop area over the part you want to keep
- Download the squared image
Tip: For portrait photos being cropped to square, position the crop so the person's eyes are roughly in the upper third of the frame — this follows natural viewing patterns and looks more engaging than dead-center placement.
Circle Cropping
Circle crops are primarily used for:
- Profile pictures (most social media platforms display avatars in circles)
- Team member photos on "About Us" pages
- Contact cards and directories
- App avatars
How Circle Cropping Works
A "circle crop" doesn't actually change the image file's shape — image files are always rectangular. Instead, circle cropping:
- Masks the image with a circular boundary
- Makes everything outside the circle transparent
- Saves as PNG (because PNG supports transparency)
This means the output is technically a square PNG with transparent corners, but visually it appears as a circle.
How to Create a Circle Crop
Using BestPNG's round corners tool:
- Go to bestpng.com/tools/round-corners
- Upload your image
- Set the corner radius to maximum (this creates a full circle when applied to a square image)
- Download the result as PNG
Important: For a perfect circle, your source image should be square (1:1). If it's rectangular, crop it to a square first, then apply the round corners.
Circle Crop Tips
- Center the face — for profile pictures, ensure the face is centered within the circular area
- Leave some margin — don't crop so tightly that the circle clips the top of the head or chin
- Use a high-resolution source — circle-cropped avatars may be displayed at various sizes, so start large
- Save as PNG — JPG cannot preserve the transparency that makes the circle shape visible
Rounded Rectangle Cropping
Rounded corners give images a modern, polished look. They're popular in:
- App interfaces — iOS and Android both use rounded rectangles extensively
- Card layouts — blog post cards, product cards, testimonial cards
- Presentations — screenshots with rounded corners look more professional
- Social media graphics — adds a design touch to otherwise plain images
How to Add Rounded Corners
- Open BestPNG's round corners tool
- Upload your image
- Adjust the corner radius — smaller values give subtle rounding, larger values give more dramatic curves
- Preview and download as PNG
The transparent corners mean you can place the image on any background and the rounded shape shows through correctly.
Handling Transparency
Shape-cropped images rely on transparency to look correct. Here's what you need to know:
PNG Is Required
JPG does not support transparency. If you save a circle-cropped image as JPG, the transparent areas will become white (or another solid color). Always use PNG for shape-cropped images.
Transparent vs. White Background
| Format | Transparent Areas | Best For |
|---|---|---|
| PNG | Truly transparent | Web use, overlays, any background |
| JPG | Filled with white | Print, simple backgrounds |
| WEBP | Truly transparent | Web use (modern browsers) |
Checking Transparency
Most image viewers show transparency as a checkerboard pattern (alternating gray and white squares). If you see a checkerboard behind your circle crop, the transparency is working correctly.
Common Shape Cropping Scenarios
Profile Picture for Social Media
Most platforms crop avatars to circles automatically. The best approach:
- Crop your photo to 1:1 square with the face centered
- Upload to the platform — it will apply the circular mask
- No need to pre-crop to a circle unless you're using the image outside of social media
Product Photo for E-Commerce Grid
E-commerce grids typically show products in consistent squares:
- Start with a product photo on a clean background
- Remove the background if needed
- Crop to 1:1 with the product centered
- Ensure consistent padding around the product
Team Photo for Website
"About Us" sections often show team members in circles:
- Start with a headshot or portrait
- Crop to 1:1 with the face in the upper-center area
- Apply round corners at maximum radius for a circle
- Use the PNG output with transparent corners on your webpage
Screenshot for Blog Post
Blog post screenshots look cleaner with rounded corners:
- Take your screenshot
- Upload to BestPNG's round corners tool
- Set a moderate corner radius (8-16 pixels usually looks good)
- Download the PNG and use in your blog post
Custom Shapes Beyond Circles and Squares
For shapes beyond standard circles, squares, and rounded rectangles — like stars, hexagons, or custom outlines — you'll need a tool that supports custom clipping paths:
- Figma (free) — use frame masking with any shape
- Photoshop — clipping masks with any vector path
- CSS clip-path — for web display, you can clip any HTML element to a custom shape without modifying the image file itself
For most practical purposes, circles, squares, and rounded rectangles cover the vast majority of shape-cropping needs.
Frequently Asked Questions
Why does my circle crop show a white background instead of transparency?
The image was likely saved as JPG, which doesn't support transparency. Re-save it as PNG. If you're viewing it on a white web page, the transparency may be working but invisible — try placing it on a colored background to verify.
Can I crop a non-square image into a circle?
Technically, the result will be an oval, not a circle. For a true circle, first crop the image to a 1:1 square, then apply the circular mask.
What size should my circle profile picture be?
Most platforms recommend at least 400x400 pixels for profile pictures. Upload the largest version you have — the platform will resize it. Common display sizes are 150x150 to 400x400 pixels.
How do I put a circle-cropped image on a colored background?
If the circle crop was saved as PNG with transparency, simply place it on any background in your design tool or HTML. The transparent areas will show the background color through. If the background appears white instead, the PNG may not have an alpha channel — re-export with transparency enabled.
Conclusion
Shape cropping is essential for profile pictures, social media graphics, and modern web design. The key is understanding that shaped images require transparency (PNG format) and that circles need a square source image.
BestPNG provides the tools you need: image cropper for squares and standard ratios, and round corners for circles and rounded rectangles. Both work free in your browser.