Skip to main content
Round the corners of an image with the br_ parameter. Pass the radius in pixels; set it to at least half the smallest dimension to produce a circle.
br_ takes a radius in pixels. On a square image, a radius of at least half the side length produces a full circle — for example, a 360×360 px image needs br_180 or higher. Previews below cap at 360 px and show the real output dimensions.

How does it work?

You add br_{pixels} to the transform segment. Autorender masks the corners to the given radius after resizing and cropping, so the rounding applies to the final output dimensions. Larger radii round more aggressively:
  • 520 px: subtle rounding for photos and hero images
  • 2050 px: card and UI corners
  • 50 px and up, to half the smallest dimension: circular and oval shapes
Rounded corners

How to round corners?

Increase br_ to round more. The tabs below apply a 10 px, 20 px, and 50 px radius (br_10, br_20, br_50) to the same 360 px wide image.
10 pixel border radius

How to make a circular image?

Crop to a square, then set the radius to half the side length. This example crops to 360×360 px (w_360,h_360,c_crop) and applies a 180 px radius (br_180) for a full circle.
Circular image
For a circular crop, set the radius to at least half the smallest dimension — a 300×300 px image needs br_150 or higher to close into a full circle.

How to combine border radius with other transforms?

Border radius applies after resize and crop, so it works with any crop mode. The tabs below round a resized image, a cropped square, and a fill-mode crop.
Border radius with resize
A radius larger than half the smallest dimension can clip content near the corners, so keep the subject away from the edges when you round heavily.

Next steps

Crop

Crop to a square before rounding into a circular avatar.

Resize and aspect ratio

Set the output dimensions the corners round against.

Image layers

Composite rounded images into cards and banners.

Recipes

Save rounded-corner combinations as reusable t_ tokens.