Menu

Circular Images with CSS

In this tutorial, we’ll go over some CSS techniques for rendering circular <img> elements. The main CSS property responsible for the effect is border-radius.

Though it’s quite simple to apply the effect to square images, rectangular images will require a little bit more extra work.

Examples of CSS circular/roiunded images

View Demo

Download Source

Square Images

An img element that’s perfectly square only needs one line of CSS. This technique works best on square images.

HTML

<img class="circular--square" src="woman.png" />

CSS

.circular--square {
  border-radius: 50%;
}

The style rule above is the shorthand for:

.circular--square {
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
}

By setting all the border-radius properties to 50% of the width/height of the square img element, we end up shaping the img element into a circle:

How to create circular img elements from square-shaped photos

Rectangular Images

Rectangular images are a bit trickier.

To render a circle, the image must start out as a square.

To work around the problem, we can wrap the img element in a square div element. We then “crop out” the parts of the img element that go beyond the square wrapper div. We can carry this out by setting the wrapper div‘s overflow property to hidden.

So that the subject of the photo is less likely to get cropped out, we also have to treat landscape photos (which are horizontally-oriented rectangles) differently from portrait photos (which are vertically-oriented rectangles).

Landscape-oriented Images

HTML

<div class="circular--landscape">
  <img src="images/barack-obama.png" />
</div>

CSS

.circular--landscape {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}

The width and height property values must be the same so that the wrapper div (.circular--landscape) renders as a square.

In addition, the width and height property values must be equal to or less than the height of the img. This makes sure the img element is able to occupy the wrapper div without being stretched out.

Generally, the subject of landscape photos will — but not always — be located around the center of the composition. To give us the best chance of not cropping out the photo’s subject, we can horizontally center the img element in the wrapper div by nudging the img element to the left to compensate for the left-biased cropping.

The amount we nudge the img element is equal to 25% of the width/height of the wrapper div. In this case, we will nudge the image 50px (25% of 200px is 50px) to the left. We can accomplish this by setting the margin-left property of the img element to a negative value:

margin-left: -50px;

How to create circular img elements from landscape photos

The assumption that the subject of the photo will be close to the center of the composition is not always going to be true. It’s best to keep this assumption in mind when you’re choosing (or editing) images for this technique.

Portrait-oriented Images

HTML

<div class="circular--portrait">
  <img src="images/woman-portrait.png" />
</div>

CSS

.circular--portrait {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
  height: auto;
}

The assumption we’ll make for portrait-oriented images is that the subject of the photo is at the top-center of the composition. Again, this isn’t going to be the case in every single portrait photo.

Similar to landscape photos, the wrapper div of portrait-oriented img elements must have equal width and height property values so that the wrapper is a perfect square.

This time, the width/height property value must be equal or less than the width of the img element so that the image can cover the wrapper div without being stretched out.

For portrait-oriented images, we assign a height of auto and width of 100%. (We did the opposite for landscape-oriented images.)

We don’t need to move the img element, because our expectation is that the subject of the photo is at the top-center of the composition.

How to create circular img elements from portrait photos

Recap

This technique is best used on square img elements, with the subject located dead-center of the photo. But, we don’t live in a perfect world, so if needed, you can use a wrapper div for rectangular img elements.

The main CSS property responsible for the circular shape is the border-radius property. Setting the radius of the corners to 50% of the width/height results in a circle.

Related Content

Responsive Full Background Image Using CSS

How to Create CSS Ghost Buttons

Creating Responsive Images with CSS

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

This was published on Oct 19, 2015

7 Comments

Mike Dettmer Oct 19 2015

Another option is to use the incredible smartcrop.js ( https://github.com/jwagner/smartcrop.js/ ) to do content-aware cropping on your images into a square resolution, then set the border-radius on the result!

    Jacob Gube Oct 19 2015

    Thanks for the tip. I considered discussing smartcrop.js while I was writing this tutorial. But I decided that I want to cover smartcrop.js in another post.

    Nonetheless, great suggestion: It’s a good idea to use smartcrop.js to focus in on the photo’s subject, and then use border-radius to shape the resultant element into a circle. The benefit is you don’t have to worry as much about your photo’s subject being cropped out of the circle, and no need to assume the subject is close to the center of the composition. This assumption is a problem because photographers often use artistic techniques such as the “Rule of Thirds” when framing the subject in the photo.

Bhumi Shah Oct 28 2015

Nice Post. In depth explanation.It is very easy to use provided code. Thanks

Justin Martin Oct 30 2015

Nice article, Thanks for sharing, I was looking for this kind of article for a long time.

Rajinder Kaur Oct 31 2015

it is very easy way………………..thank you………………

Thanks– You did a great job explaining this. I’ve figured how to put a border around the rounded images ( border: 12px solid #000; ) but can’t get that border to use an image (as you can with rectangular images) any ideas?

SPECTUM Feb 22 2016

Nice It work for me thank you.

This comment section is closed. Please contact us if you have important new information about this post.

Partners