Linked or individual corners
Adjust all four corners together or unlink them and set each corner independently.
Large radii are normalized against image dimensions so paths do not overlap or break.012 · IMAGE EDIT
Image Border &Rounded Corners Tool
Add borders, rounded corners, circular shapes, and shadows to images.
LOCALPROCESS IN YOUR BROWSER
WORKSPACEImage edge styling workspace
Drop an image here
Images stay in your browser and are not uploaded.
JPG · PNG · WebPHOW TO USE
How to use
- 01
Select an image and choose rounded corners or circle mode.
- 02
Adjust the corner radius and individual corners.
- 03
Set border thickness, color, and alignment if needed.
- 04
Adjust shadow offset, blur, spread, opacity, background, and auto padding.
- 05
Compare the original, result, and output pixels, then choose format and quality and download.
EDGE STYLE GUIDE
How to render rounded corners, borders, and shadows correctly
The shape and outer effects are rendered into the downloaded pixels rather than being shown only as CSS preview effects.Inside, center, or outside
Borders follow the rounded or circular path and canvas expansion is calculated from thickness and alignment.
Outside borders can make the result canvas larger than the source.Shadow without clipping
Adjust X/Y offset, blur, spread, color, and opacity while Auto Padding reserves the required bounds.
Padding is calculated per side even when the shadow is strongly offset.Which shape should you choose?
- Circle mode is useful for profile images because it creates a true circle without forcing a crop of the source.
- Small radii with thin borders work well for app screenshots and card images when you want a cleaner edge without changing the source impression.
- Transparent PNG output is useful for web and app assets because the pixels outside rounded corners can remain transparent.
Check before exporting
- JPG cannot store alpha. If the background is transparent, JPG export composites the selected background color.
- Outside borders and large shadows can enlarge the result canvas beyond the source dimensions.
- Circle mode preserves the full rectangular source instead of automatically center-cropping it.
- For general users, the service ceiling is 16,000px per side and 80,000,000 total output pixels, including canvas expansion from borders, shadows, and padding.
RENDER ROUTES
How settings affect the result canvas
Separating shape, outer effects, and padding makes the final dimensions easier to predict.SHAPE→BORDER
Lock the shape first
Choose rounded or circular geometry first, then calculate the border against that path.
BORDER→SHADOW
Calculate outer effect bounds
Center/outside borders and shadow X/Y, blur, and spread determine how far the canvas must expand.
PADDING→OUTPUT
Expand then export
Auto padding and extra padding are combined before the final JPG, PNG, or WebP render.
PRACTICAL DETAILS
Four details that determine real output quality
Corner anti-aliasing
Canvas paths keep boundaries smoother on small images and large radii.
Uniform border thickness
Circular and rounded paths are aligned so borders do not look thicker on one side or break at corners.
Transparent alpha
PNG and WebP retain transparent pixels around rounded corners and shadows; preview checkerboards are never exported.
Source-resolution export
The preview is scaled for the screen, while downloads are rendered again from the source resolution.
EXPERT POST
Practical criteria for clean image edge styling
Rounded corners, circles, borders, and shadows look simple, but incorrect radius, alignment, alpha, or canvas math becomes obvious in the saved file.Radius should be judged relative to image size
The same 40px radius looks very different on a 300px image and a 3000px image. For card-style images, think about the radius relative to the shorter side and verify normalized corner geometry when individual values are used.
A true circle needs more than 50% radius
Applying a 50% radius to a rectangle creates an ellipse. A true circle requires a square output area. This tool preserves the full source instead of forcing a center crop, then applies the circular mask on a square canvas.
Border alignment changes output dimensions
Inside borders are easier to keep within the source canvas. Center and outside borders extend beyond the source edge, so the output canvas must expand to prevent clipping.
Border and mask radii should not be treated as identical paths
Using exactly the same radius for the image mask and border centerline can make thickness look uneven around corners. Border position and thickness must be reflected in the inner and outer geometry.
Auto padding is a clipping-prevention calculation
Adding the same margin on every side is not enough when a shadow has a strong X or Y offset. The shadow bounds should be calculated independently for the top, right, bottom, and left.
Transparent PNG/WebP and JPG follow different rules
PNG and WebP can preserve alpha around rounded corners and shadows. JPG has no alpha channel, so transparent pixels must be composited over a background color, which can change how edges appear.
Preview and download do not need the same render size
Rendering a large source at full resolution on every preview update wastes memory and hurts responsiveness. A scaled preview plus a final source-resolution render is usually the safer balance.
Watch pixel area, not only file size
A small compressed source can produce a very large canvas after outside borders, padding, and shadows. Safe limits should consider output width, height, total pixels, and encoding memory rather than compressed bytes alone.
FAQ
Frequently asked questions
01Can I round image corners?+
Yes. Adjust all corners together or set each corner independently.
02Can I create a circular image?+
Yes. Rectangular sources are preserved inside a square canvas before the circular mask is applied.
03Can rounded images have borders?+
Yes. The border follows the rounded path.
04Can I change border alignment?+
Yes. Choose inside, center, or outside; the result canvas expands when required.
05Can I add a shadow?+
Yes. Adjust horizontal and vertical offsets, blur, spread, color, and opacity.
The original file is unchanged and all processing stays in the current browser.