How to Make a Perfect Circle From an Image With CSS

Making a perfect circle from an image with CSS is a simple web development technique that can make your website look cleaner and more professional. You can use circular images for profile pictures, team member sections, author photos, testimonials, and many other website elements.

The good news is that you do not need to edit the image in Photoshop or any other image editing software. With just a few CSS properties, you can turn an ordinary square or rectangular image into a circle directly in the browser.

In this tutorial, you will learn how to create a circular image using HTML and CSS, understand why border-radius: 50% works, and fix common problems that prevent images from appearing perfectly round.

What Does It Mean to Make an Image Circular With CSS?

A circular image is an image displayed inside a round shape rather than its original rectangular or square shape.

For example, imagine you have a square photograph of a person. By applying CSS, you can make the photograph appear inside a circle while hiding the corners.

This technique is commonly used on websites for:

• Profile pictures and user avatars.
• Author images beside blog articles.
• Team member photographs.
• Customer testimonials.
• Social media-style profile sections.
• Personal portfolios and biography pages.

CSS provides a property called border-radius that makes this possible. When you set its value to 50%, a square image with equal width and height can become a perfect circle.

1. Create a Simple HTML Structure

Before writing the CSS, you need an HTML element to display your image.

For this example, we will use an ordinary HTML <img> element.

Create a file named index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Image With CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="profile">
        <img src="profile.jpg" alt="Profile photograph">
        <h2>John Doe</h2>
        <p>Web Developer</p>
    </div>

</body>
</html>

Let’s understand the important parts of this code.

• <div class="profile"> creates a container for the profile content.
• <img src="profile.jpg"> displays the image you want to make circular.
• alt="Profile photograph" provides alternative text describing the image.
• <h2> displays the person’s name.
• <p> displays a short description.

The src attribute points to the image file. In this example, the image is named profile.jpg.

Make sure your image file is in the same folder as index.html. If your image has a different name or is stored in another folder, update the src value accordingly.

We have also linked an external CSS file called style.css. This allows us to keep the styling separate from the HTML.

2. Use CSS to Make the Image a Perfect Circle

Now create a file named style.css in the same folder.

Add the following code:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 40px;
}

.profile img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

Save the file and open index.html in your browser.

The image should now appear as a circle.

Understanding the CSS properties

1. width: 200px;

This sets the image width to 200 pixels.

2. height: 200px;

This sets the image height to 200 pixels.

The width and height are equal, which gives the image a square shape before the circular styling is applied.

3. border-radius: 50%;

This is the main property responsible for making the image circular.

The border-radius property rounds the corners of an element. When its value is 50%, the corners of a square element become fully rounded, creating a circle.

4. object-fit: cover;

This property controls how the image fits inside the available width and height.

The value cover makes the image fill the entire square area while maintaining its original proportions. Any extra part of the image that does not fit is cropped.

This is particularly useful when working with photographs that are rectangular rather than square.

3. Why Must the Width and Height Be Equal?

One of the most common mistakes beginners make is setting border-radius: 50% without checking the image dimensions.

For a perfect circle, the image’s displayed width and height should normally be equal.

For example:

img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

This produces a circle because both dimensions are 200 pixels.

However, consider this example:

img {
    width: 300px;
    height: 200px;
    border-radius: 50%;
}

Here, the width is 300 pixels while the height is 200 pixels. The result is an oval rather than a perfect circle.

This happens because the rounded shape follows the dimensions of the element.

If you want a perfect circle, use equal width and height values, such as:

width: 150px;
height: 150px;

You can also use other equal dimensions, depending on the design of your website.

4. Use object-fit: cover to Prevent Image Distortion

Not every image is square. You might have a portrait photograph measuring 800 pixels wide and 1,200 pixels tall.

If you force that image into a square using only width and height, the browser may stretch or squeeze it when its natural proportions are not preserved by the image-fitting behavior.

This can make a person’s face look unusually wide or narrow.

The solution is to use object-fit: cover.

.profile img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

With object-fit: cover, the browser scales the image until the square is filled, then crops the excess area. The photograph retains its proportions instead of being distorted.

This is usually the best approach for profile photographs.

Keep in mind that object-fit: cover may crop important parts of the photograph. If the person’s face is positioned near the edge, you may need to adjust the visible area.

You can do this with object-position.

.profile img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

The object-position: center top rule moves the visible image area toward the top. This can help when a portrait contains extra space above or below the subject.

You can also use values such as center, left center, or right center to adjust the crop.

5. Make a Circular Image With a Border

Sometimes, a circular image looks better with a border around it. A border can separate the photograph from the background and give the profile a more polished appearance.

You only need to add a border property.

.profile img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #e63946;
}

In this example, the border is four pixels thick and uses a red color.

The border-radius: 50% property rounds the image and its border, so the border follows the circular shape.

You can change the border color to match your website’s design.

For example, a blue border may work well on a blue-themed website, while a neutral gray border can suit a minimalist design.

Avoid making the border too thick if you want the photograph itself to remain the main focus.

6. Add a Shadow for a More Professional Look

You can also add a subtle shadow to make the circular image stand out from the background.

Use the box-shadow property.

.profile img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Let’s break down the shadow:

• 0 means there is no horizontal shadow offset.
• 4px moves the shadow downward.
• 12px controls how blurred the shadow appears.
• rgba(0, 0, 0, 0.15) creates a black shadow with low opacity.

The result is a soft shadow that gives the image a little depth without making it look too heavy.

7. Complete Example: A Simple Circular Profile Card

Now let’s combine everything into a small profile card. This example includes a circular image, a person’s name, a description, and a simple card background.

Use the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Profile Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="profile-card">
        <img src="profile.jpg" alt="Portrait of John Doe">

        <h2>John Doe</h2>

        <p>Frontend Developer</p>
    </div>

</body>
</html>

Then use this CSS in style.css:

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f2f4f7;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-card {
    width: 300px;
    padding: 30px;
    text-align: center;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.profile-card img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #e63946;
}

.profile-card h2 {
    margin: 18px 0 8px;
    color: #222;
}

.profile-card p {
    margin: 0;
    color: #666;
}

Save both files and refresh your browser.

The browser should display a white profile card in the center of the page. The photograph will appear as a circle, with the person’s name and job title beneath it.

The display: flex, justify-content: center, and align-items: center properties position the card in the center of the available page area.

The box-sizing: border-box rule makes sizing more predictable by including padding and borders in an element’s declared dimensions.

This example shows that a circular image can be used as part of a complete website component, not just as an isolated photograph.

8. Common Problems and How to Fix Them

If your image does not appear as a perfect circle, check the following issues.

Problem 1: The image looks like an oval

Cause: The width and height are different.

Solution: Set both dimensions to the same value.

img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
}

Problem 2: The image looks stretched

Cause: The image is being forced into a box without preserving its original proportions.

Solution: Add object-fit: cover.

img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
}

Problem 3: The image does not appear at all

Cause: The image path or filename may be incorrect.

Solution: Check that profile.jpg exists in the correct folder and that the filename matches the src attribute. File extensions and letter case can matter on some servers.

Problem 4: The circle cuts off the person’s face

Cause: The image is being cropped around its center, but the face is not positioned near the center.

Solution: Adjust object-position.

img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

Experiment with the positioning until the important part of the photograph is visible.

9. Can You Make an Image Circular Without CSS?

You can edit a photograph using an image editor and save it with a circular crop. However, for most websites, CSS is more flexible.

With CSS, you can change the image size, border, shadow, and crop without creating a separate circular version of every photograph.

The original image file can remain unchanged. This is helpful when you want to reuse the same image in different layouts.

Remember that border-radius changes how the browser displays the image. It does not permanently crop or modify the original image file.

Making a perfect circle from an image with CSS is straightforward once you understand a few key properties.

The most important rule is to give the image equal width and height values, then apply border-radius: 50%. For photographs, adding object-fit: cover helps fill the circular area without distorting the image.

You can improve the result further with borders, shadows, and object-position to control which part of the image remains visible.

Start with a simple circular profile image, test it in your browser, and then use the same technique in profile cards, author sections, team pages, and other web development projects.