Rounded Corners and Circular Images for Websites

Rounded corners can help photographs fit a card layout, while circular portraits give team pages a consistent shape. The shape should support the content: a circle that cuts off a face or a rounded product image that hides an important detail is not an improvement.

There are two ways to create the effect. You can change the image file, or let the browser round its appearance on the page. The right choice depends on where you will use the result and whether you need to change the shape later.

Should you use CSS or edit the image file?

CSS is usually the more flexible choice for images on a website you control. You can use the same original in different layouts, adjust the corners across the site, and change the crop without exporting another file. Many website editors provide a corner-radius setting that applies this styling for you.

Edit the file when the website or app accepts an image but has no corner controls, or when you need to place a rounded image into another design. The transparent corners are saved in the file, so the shape does not depend on your website's CSS.

Choose a shape and radius that suit the content

Start with the image's job. A circle can work well for a small portrait because the face is the focus. A landscape photograph, screenshot or product detail usually needs a rectangular frame to preserve more information.

For website cards, try a modest radius such as 12 or 16 CSS pixels and review it beside the card, buttons and other images. These are design examples, not required values. Reusing a small set of radii makes the page easier to keep consistent than choosing a different rounding amount for every photograph.

Judge the result at its actual display size. A radius that looks subtle in a large source image can become almost invisible in a thumbnail. With rounding saved into the image, the corners scale with the whole picture. A fixed CSS radius, such as 16 pixels, stays at that CSS size even when the image's displayed width changes.

For example, take an 800 × 400 image with Pixilo's rounding set to 25%. Its saved radius is 50 pixels. Displaying the image at 400 × 200 halves that visible radius to about 25 CSS pixels. Displaying it at 200 × 100 reduces it to about 12.5 CSS pixels. Choose the amount while checking the size visitors will actually see, not just the full-size preview.

Keep important content away from the corners. For a group photo, check the people near the edges. For a screenshot, preserve labels and controls. If a useful detail disappears, reduce the rounding or choose a different crop rather than forcing the image into the shape.

Round an image's corners with Pixilo

1. Prepare a working copy. Keep the original separately. If the image needs a different shape, use the crop tool first. If its dimensions are excessive, resize the copy before rounding.
2. Select the image. Open Rounded Image Corners and choose one JPG, PNG or WebP.
3. Adjust Corner rounding. Start with a small amount for subtle corners and increase it while watching the preview. All four corners use the same radius.
4. Choose what fills the removed corners. Leave Transparent background selected for a result that can sit on different page colours. Turn it off to select a background colour.
5. Download and inspect. Select Download PNG, open the saved file and check the edges against the background where you will use it.

The tool keeps the image's pixel width and height. It removes or fills the corners within those dimensions; it does not resize the picture or remove the background behind its subject.

What the rounding percentage means

Pixilo measures the radius as a percentage of half the shorter image side. At 0%, the corners remain square. At 100%, each corner has the largest circular radius that fits. In the 800 × 400 example above, half the shorter side is 200 pixels, and 25% of that is 50 pixels.

This slider is not the same as a CSS percentage. CSS calculates horizontal percentage radii from the element's width and vertical percentage radii from its height. On a non-square box, border-radius: 50% creates an ellipse. Pixilo's 100% setting creates a capsule on a non-square image and a circle on a square image.

Make a circular image with Pixilo

Start with a square image. Rounding a wide image keeps it wide, even at the highest setting, so choose the crop before applying the circle.

1. Crop to 1:1. Open your original in the crop tool and choose a square crop. Leave room around the head or object, remembering that the circle will hide the square's corners.
2. Choose suitable dimensions. A 320 × 320 copy is one option for a portrait displayed at 160 × 160 CSS pixels on a 2× screen. Use the resizer if needed. Compare the detail at the intended display size, and avoid enlarging a small source just to reach those dimensions.
3. Round the square. Select the prepared square in Rounded Image Corners, set Corner rounding to 100%, and keep Transparent background selected.
4. Check the saved circle. Download the PNG and confirm that the head, hair and other important details fit comfortably inside the visible area.

The circle sits inside a square PNG with transparent corners. The file's width and height remain unchanged; only the visible outline becomes circular. A wall or room behind the person remains visible inside the circle.

Add rounded corners with CSS

If your website editor already offers a corner-radius setting, try that first. For a custom implementation, the CSS needs to target the image element:

1. Add the class. If you edit HTML directly, use the markup below or add rounded-image to your existing <img> element's class attribute. In an editor's CSS class field, enter the name without a leading dot, then check whether the editor applies it to the image or a surrounding element.
2. Add the CSS. Paste the CSS example into your site's stylesheet or its custom CSS field. Keep the leading dot in .rounded-image, which selects elements with that class. A custom CSS field normally expects just CSS, without HTML <style> tags.
3. Check the published image. Replace the example path and image details if you use the HTML below. Preview the page and confirm that other theme or editor styles are not overriding the result.

This example preserves the image's proportions and allows it to shrink within its container:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Finished kitchen with oak cabinets and a stone worktop">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Use your own file path, dimensions and alt text. The HTML width and height describe the source dimensions and help the browser reserve space. The CSS controls the displayed size and corner shape. To use the circular example below, follow the same steps with the class team-avatar and its CSS.

If the editor puts the class on a wrapper around the image, change the CSS selector from .rounded-image to .rounded-image img. For the circular example, use .team-avatar img instead of .team-avatar. This applies the image sizing and rounding rules to the image inside that wrapper.

The 16px value rounds all four corners. CSS can also give corners different radii: border-radius: 16px 16px 0 0 rounds only the top corners, in the order top left, top right, bottom right, bottom left. Pixilo's tool currently rounds all four equally. See MDN's border-radius reference for the full syntax and percentage behavior.

CSS rounding changes the appearance on that page, not the downloaded source file. Opening or saving the original image separately will not include the CSS shape, and parts hidden by CSS remain in the source.

Create a circular image with CSS

A CSS circle needs equal displayed width and height. The source photo can be rectangular: object-fit: cover fills the square without stretching the person, while the radius clips that square into a circle.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, physiotherapist">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

This example assumes the source file is 800 × 1200 pixels and displays it in a 160 × 160 square. Replace those values for your image and layout. If you adjust the displayed size at a mobile breakpoint, keep its width and height equal so the circle stays circular.

object-fit: cover preserves proportions and crops anything that does not fit. object-position: 50% 40% centres the crop horizontally and, for this tall source image, shows a slightly higher part of the photo than the default vertical centre. It does not zoom the face in or out. Adjust the position for each portrait rather than assuming one setting suits everyone.

MDN explains object-fit and object-position in more detail. Avoid forcing a rectangular photo into a square without suitable fitting rules, because it can stretch the subject.

Example: make team portraits look consistent

Suppose a clinic has four staff photos: two head-and-shoulders portraits, one wider photo taken in a treatment room and one tightly cropped face. The team page will show all four in 160 × 160 circles. Giving them the same outer shape is only the first step.

1. Choose a reference crop. Use one portrait to decide how much of the head and shoulders should appear. Leave comfortable room above the hair, and place the eyes at a similar height across the set. Treat this as a visual reference, not a rigid measurement for every person.
2. Match the face size. Crop the wider room photo more closely so the person does not look much smaller than the others. If the tight portrait already cuts off hair or the chin, use a wider original if available. Making its circle larger will not restore missing content.
3. Choose how to apply the circle. For CSS, prepare the crops first, then use the same 160 × 160 frame and adjust each image's position. For saved circular images, prepare matching square copies, such as 320 × 320 when appropriate, and apply Pixilo's 100% rounding to each.
4. Review the set together. Place the portraits beside their names at the actual display size. Check that no face dominates just because it is more tightly cropped. Then review the mobile layout, where the portraits may appear one above another.

A consistent result comes from similar framing and face size as well as the circular outline. Keep useful context inside each crop, but place names and roles in page text rather than embedding them in the portrait.

Choose the background and file format

Save the image with transparency if it needs to work on different page colours or in dark mode. A solid white corner may blend into a white page but show as a square patch on a dark card. Some image viewers display transparent areas on white or a checkerboard; try the file on another background before deciding that it contains white pixels.

When Transparent background is off in Pixilo, the selected colour fills both the removed corners and any transparent areas already in the image. It does not replace an opaque background within the photograph. If you filled corners with white and now need transparency, return to your original and export again with transparency enabled.

PNG preserves transparency and does not add another round of lossy compression, but a photo exported as PNG may grow in file size. For website delivery, compare a WebP copy, which can keep transparency. Pixilo's conversion is lossy, so inspect edges and detail after converting. JPG cannot preserve transparent corners. Our transparent background guide covers these format choices.

If you use CSS for the shape, the photo itself does not need transparency. You can keep a suitable JPG or WebP and let the browser round its appearance. CSS does not compress that source file. Choose dimensions for the intended layout, then compare the delivered file's size and sharpness.

Check the result in the real layout

• Inspect the subject. Review faces, hair, product edges and text near the crop. The shape should preserve the information readers need.
• Check small screens. For a CSS circle, check that the image's displayed width and height remain equal. Review the corner radius at the final display size too.
• Try the page backgrounds. Look for unwanted solid corners or a light fringe around the edge on both light and dark surfaces.
• Inspect the final version. The website or app may resize, crop or convert your file. Check the saved or published copy, including after any format conversion.
• Keep a useful text alternative. Describe the image's purpose, not merely its shape. A team portrait should identify the person in context; decorative images normally need empty alt text. See our alt text and filename guide.

Frequently asked questions

Why did my image become an oval or a capsule?

Check the proportions first. Use equal displayed width and height for a CSS circle, or crop the source to a square before applying Pixilo's 100% setting. The shape comparison above shows why a rectangle produces a different outline.

Why are the corners still white?

First test the file against a different background, as described above. If the corners contain white pixels, check whether a solid colour was selected or the file was converted to JPG. The website or app may also have replaced transparency with white. Save a new copy from the original with transparency enabled, then check the format after publishing.

Why does the image have square corners inside a rounded card?

Rounding the parent card does not automatically clip its child image. Apply the radius to the image itself, or use a rounded wrapper with overflow: hidden when its contents should be clipped together. If the wrapper also contains interactive controls, check that clipping does not hide their keyboard focus indicators.

Can I make a circle without cutting off any of the photo?

A circle cannot fill a rectangular photograph's entire frame without losing some area or changing the composition. If you must retain all the content, place the photo inside a larger square design with enough surrounding space, then check the circular boundary. A rectangular frame is often a better choice for detailed content.

Do rounded images load faster?

The shape alone does not guarantee a smaller download. Use the dimensions and format checks above, and measure the file the published page actually delivers.

Summarize withChatGPT (opens in a new tab)Grok (opens in a new tab)Google (opens in a new tab)Perplexity (opens in a new tab)Claude (opens in a new tab)