- !important
- Animation
- Background image
- Blur() function
- Border color
- Border radius
- Border width
- Borders
- Box model
- Box shadow
- Class attribute
- Clip path
- Color
- Comment
- Cursor
- Display property
- First-child selector
- Flexbox
- Font family
- Font size
- Font style
- Font weight
- Gap
- Gradient
- Grid layout
- Height
- ID selector
- Letter spacing
- Linking a style sheet
- Margin
- Media query
- Minmax() function
- N-th-child selector
- Object fit
- Opacity
- Outline
- Overflow property
- Padding
- Pixels
- Pointer events
- Position property
- Pseudo-classes
- Pseudo-elements
- Rotate
- Rounding an image
- Scale()
- Selectors
- Specificity
- Text align
- Text shadow
- Text wrap
- Transition property
- Translate() property
- Units
- Variable
- white-space
- Width
- Z-index
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, addingobject-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.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.