How to make Round Image?

HTML/CSS
1

Hi Everyone. My name is Sina. I’m new HTML,CSS learner. As Mosh mentioned if we set the border-radius: value to half of the width: value then we get the round image. I set my width value to 150 px and my border-radius to75px, but my image displayed like this and I cant make it round. Can anyone suggest me how to fix it and what cause this problem?

Thank You

Screenshot
Screenshot458×648 44.4 KB

2

The original image is probably not square. There are a couple of approaches to achieving what you are wanting to do, and using border-radius is one of them. You just need to resize the image first.

You should open the image in an image editing software and resize it to be a square image, you might need to use crop and move the image around to center it. This can be done in photoshop or most simple paint apps.

After that, bring the new image back into your html and try the code again, should fix the issue with just a few minutes of work.

Later you can learn other methods like clip paths or object fit.

Hope that helps

3

@MTownsend Thank you so much, my picture was fixed after I cropped it to square.

4

You can as well use objects-fit:cover;
In your style, you will get the exact shape you wanted

1 Like
5

no need cropped the image to square

you only need to define fixed width, and height

<div class="rounded-image">
   <img src="..." alt="..." / >
</div>

.rounded-image {
    width : 100px;
    height: 100px;
    border-radius: 50%; // this make circle
   overflow: hidden; //hiding image overflow
   object-position: center;  // you can custom the position
}

read more object-position : object-position - CSS: Cascading Style Sheets | MDN

6

So this was already mentioned in the first post.

I stated they will learn new ways to do this as they progress. Simply slapped a fixed width and height on a picture that you do not know the aspect of will cause image to distort. You are forcing a rectangular image into a square shape.

You can also use lots of methods, such as object-fit properties with cover, contain…etc, but there is more to take into account than just slapping properties on things.

The image has the face centered in the picture, the outcome needs to be square shaped so 50% border-radius can be applied…etc. When applying styles you should be trying to have a little more thought about the inputs, the tools at hand, and what you are really wanting to outcome to be.

Never was it stated that in the original picture the portrait was in the center of the image, nor the aspect of the image, or even the size. Just some things to think about.

That is why I suggested cropping the image to the square size they required, as well as centering the image how they prefer…