CODEWITHSUNDEEP
htmlcss
Stefan
Stefan

Reputation: 241

How to make a circular image in css

I'm very new to this sort of thing but this is my issue. I've looked through a couple of questions and it makes sense with how to make it circular but the image which is made circular is half cut off, is there a way of fixing this. I am using HTML and CSS.

circular_image {
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  overflow: hidden;
  background-color: blue;
}

Upvotes: 22

Views: 95991

Answers (7)

Ruchi
Ruchi

Reputation: 21

clip-path:circle(); works for me in any senerio

Upvotes: 2

serhii kuzmych
serhii kuzmych

Reputation: 395

if you use tailwincss you can opt-in this

<Image
 className="h-[50px] w-[50px] rounded-full object-cover"
 src={HouseImage}
 alt="house to invest in"
/>

Hope it helps someone.

Upvotes: 1

justAbajit
justAbajit

Reputation: 23

The above answer to use the clip-path: circle(); does the magic. Just set a width or a height to the container that holds the image and apply the clip-path: circle() property to the image itself.

Upvotes: 1

Deuel Ellan
Deuel Ellan

Reputation: 700

This work for me

clip-path: circle();

Upvotes: 63

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196276

Your css rule needs a . (if it applied with a class) or # (if it is applied with an id) at the start.

Also if you apply the rule to a container of the image you need to set the image to re-size accordingly to fit the circle;

Finally, 50% radius is all you need for a circle.

.circular_image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background-color: blue;
  /* commented for demo
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  */
  
  /*for demo*/
  display:inline-block;
  vertical-align:middle;
}
.circular_image img{
  width:100%;
}
with container

<div class="circular_image">
  <img src="http://placekitten.com/500/500"/>
</div>

<br><br>
directly on image

<img class="circular_image" src="http://placekitten.com/g/500/500"/>

Upvotes: 19

Sarower Jahan
Sarower Jahan

Reputation: 1495

Just add the border-radius:50%; to circular_imageClass.

Below the neet code is....

.circular_image{
    float:left;
    margin-left:125px;
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Modified*/
    /*overflow:hidden;*/
    background-color: blue; 
}

Upvotes: 5

Gbreux
Gbreux

Reputation: 371

You have to set the border-radius to the img itself, not to the containing div. As you know images are square or rectangular and putting them inside something circle will of course cut off the boundaries.

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

Here is the fiddle: http://jsfiddle.net/LLo1u3Ld/2/

Upvotes: 6

Related Questions