Round the corners of an image

Clip an image to a rounded-rectangle shape.

freeworks offlinenothing uploaded
ToolRound Corners
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The image is clipped to a rounded rectangle or its alpha mask is rebuilt from quarter-circle arcs at each corner. The radius is constrained by the box dimensions so adjacent arcs do not overlap.

  • Pixel radii are clamped to keep corner geometry valid.

Worked example

Round Image Corners
Apply 20px rounded corners to an image
Input
											data:image/png;base64,iVBORw0KGgo=
Output
												PNG with 20px transparent corner arcs

When to use this

Profile avatars, UI assets, and thumbnail tiles use rounded corners.

Edge cases

  • A radius larger than half the width or height must be clamped.
  • Transparent corners require an alpha-capable output format.
  • Anti-aliasing creates blended edge pixels rather than a binary mask.

References