Add Border to Circle Image

How is the border thickness calculated?

The editor multiplies the output diameter by the percent you choose and rounds to the nearest pixel. On a 512 pixel circle, 4 percent is 20 pixels. Five percent of padding on that same circle is 26 pixels, because 25.6 rounds up. The image circle is the diameter minus twice the border and the padding. Those steps are the same ones tested against the fixtures.

If the percents are so large that the photo would vanish, the controls clamp until at least one pixel of image remains. You will see a short note when that happens. Lower the sliders instead of fighting the clamp.

When does a white ring help, and when does a color help?

A white or near-white ring separates a dark photo from a dark interface. A dark ring does the same job on a light page. A saturated ring is a design choice, useful for a sticker or a series of team photos that need a shared mark. It is a poor idea when the photo is already colorful and the avatar is tiny, because the ring steals the only pixels you have.

Match the ring to the background it will sit on, not to the accent color of this website. Preview it on both plates. A ring that looks crisp on white can glow on black if the color is too bright.

What is padding for?

Padding is a gap between the border and the photo. It uses the background. On a transparent PNG the gap is clear, so the border looks like a separate ring floating around the picture. On a JPG the gap is a solid color. Use a small padding when the subject touches the mask and needs air. Use none when you want the photo to meet the ring.

Border and padding both eat the inner diameter. A face that filled the circle before the ring will look smaller after. Zoom in a step after you add the ring.

Does the border stay on PNG and JPG?

Yes. The ring is drawn inside the outer circle. Outside that outer circle, PNG and WebP stay clear and JPG uses the background. The border itself is opaque. If you need the ring to be the only color on a clear field, keep the background on clear and export PNG.

Square 1:1 export skips the circle and the ring. Uncheck it if the border is the point of the file.

How thick should the ring be?

A 4 percent border on a 512 pixel circle is about 20 pixels, which still reads at 48 pixels and does not swallow the face. A 15 percent ring looks like a badge and leaves less room for the photo. Start small, check the dark plate, then increase only if the edge vanishes into the app’s background. Padding is the gap inside the ring. Use a little of it when hair touches the mask. Use none when you want the photo to meet the color.

When does the ring help?

Add border to circle image when the photo disappears on a dark chat list or a busy slide. The ring is a percent of the diameter, and you pick the color. Add border to circle image only after the face is centered, then zoom in a step because the ring uses part of the circle.

Frequently asked questions