Glossary
HTMLCSSJavaScriptPythonSwiftTypeScriptSQLReact

CSS

CSS Round Image: Syntax, Usage, and Examples

To make an image round in CSS, you typically use the border-radius property. If the image is perfectly square, setting the border-radius to 50% creates a clean, circular shape. This technique is widely used for profile pictures, avatars, and design elements across the web.

How to Round an Image in CSS

The syntax is simple: 

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

This makes the image circular, but only if it's a square. Otherwise, the result is an oval. To get perfectly round images, the width and height values must match.

Here’s a full example: 

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="https://mimo.app/r/lighthouse.png" alt="Lighthouse image">
</body>


img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: solid 5px #ccc;
}

In this example, we use border-radius: 50% to make the image round, apply a visible border, and use square dimensions to make sure the circle works.

When to Use Round Images in CSS

Rounding images with CSS is useful in many web design scenarios. Here are a few common use cases:

1. Profile Pictures and Avatars

Many social media apps, dashboards, and forums use round profile images to create a clean, consistent user interface. Round images naturally draw attention and help unify different content layouts. 

<img class="avatar" src="profile.jpg" alt="User Avatar">


.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

2. Team or About Pages

On team or bio pages, designers often round headshots to make them stand out and create visual cohesion across rows or cards. 

<div class="team-card">
  <img src="ceo.jpg" class="bio-pic">
  <p>Leila – CEO</p>
</div>


.bio-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid #eee;
}

3. Buttons and Icons

Icons, thumbnail previews, or CTA buttons may also use round images. This can make elements look friendlier and more clickable. 

<a href="/start">
  <img src="start-icon.png" class="circle-icon" alt="Start">
</a>


.circle-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Examples of CSS Round Image Techniques

Example 1: Circular Image with a Border 

<img src="cat.png" class="round-img" alt="Cute cat">


.round-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid pink;
}

This gives you a rounded image with a colored frame, perfect for profile pictures or featured items.

Example 2: Making a Responsive Round Image 

.responsive-img {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

This approach uses aspect-ratio: 1 / 1 to keep the image square on any screen and object-fit: cover to scale and crop the image inside its bounds. Great for mobile-friendly layouts.

Example 3: Round Thumbnails in a Grid 

<div class="gallery">
  <img src="dog.jpg" class="thumb">
  <img src="bird.jpg" class="thumb">
  <img src="turtle.jpg" class="thumb">
</div>


.thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 10px;
}

This gives you a clean row of circular thumbnails.

Learn More About CSS Round Image Techniques

CSS Image Rounded Corners vs. Full Circles

If you don’t need a full circle, you can use numeric values instead of percentages: 

img {
  border-radius: 10px;
}

This rounds just the corners, giving a softer look without a full circle. You can also use individual corner values: 

img {
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

This technique creates interesting asymmetrical designs.

Using clip-path for Custom Shapes

For more complex shapes beyond basic circles, try clip-path: 

img {
  width: 100px;
  height: 100px;
  clip-path: circle(50% at 50% 50%);
}

It behaves similarly to border-radius: 50% but offers more control in some advanced layouts.

Round Image CSS with Shadow

You can add shadows for a 3D effect: 

.round-shadow {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

This adds depth and helps round images pop from the page.

Round an Image CSS with Hover Effects

Make rounded images interactive using transitions or filters: 

.round-hover {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
}

.round-hover:hover {
  transform: scale(1.1);
}

When the user hovers over the image, it gently grows, offering a tactile feel.

Common Mistakes with Round Images

  • Not using square dimensions: If the image isn’t square, border-radius: 50% won’t form a proper circle.
  • Forgetting object-fit: If your image stretches weirdly inside its container, adding object-fit: cover can fix it.
  • Using inline styles everywhere: Keep your styles in CSS files for cleaner HTML and better reuse.

Accessibility Considerations

Don’t forget to include meaningful alt text for your rounded images: 

<img src="founder.jpg" alt="Portrait of Zain, the founder" class="round-img">

Even if the image is purely decorative, using alt="" helps screen readers skip it.

The CSS round image technique is a simple but powerful way to enhance your designs. Whether you're building a profile card, a gallery, or a modern homepage, using border-radius to round images adds visual polish with minimal effort.

Remember the golden rule: round images only look right when they’re square. With a few extra touches—like shadows, hover effects, and responsive styles, you can go from basic to beautiful in just a few lines of CSS.

Learn CSS for Free
Start learning now
button icon
To advance beyond this tutorial and learn CSS by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

Company

Careers

Blog

Jobs

Product

Glossary

Code Compilers

Terms of Use

Privacy Policy

Useful

Press Kit

Imprint

Help

Follow us

© 2025 Mimo GmbH

Reach your coding goals faster

Get started