Creating a round image

Question

I want to convert square shape image into round shape image but when i applied " border-radius:50px; " it's giving me oval kind of shape. I tried a lot of things but its just not working. Any help would be appreciated. This is my HTML code -

<img class=" skill-row-img" src="images/200w.webp" alt="">

this is my CSS code - .skill-row-img { width: 25%; border-radius: 50% ;}

This is how my images are looking on the website .I want them to have a round shape.

Your image dimensions are not right. Set same Width and Height and it will work — Karan Singh, Jan 24 '21 at 04:30

score 2 · Accepted Answer · answered Jan 24 '21 at 04:32

2

Does

border-radius: 999999px;

suit your need?

The 'better' solution would be to specify your image's width and height explicitly in the CSS, rather than having the browser auto-size it.

.skill-row-img {
  width: 400px;
  height: 400px;
  border-radius: 200px; /* <-- 50% works here too, because the image is already square so you get a circle rather than an oval*/
}

answered Jan 24 '21 at 04:32

wisha

643
1
6
12

Thank you so much , It worked. So in order to get image rounded we need to keep its height and width same right ? – Jan 25 '21 at 01:55

score 0 · Answer 2 · answered Jan 24 '21 at 04:44

Insert bootstrap framework and use img-fluid class

<img src="https://dummyimage.com/600x400/000/fff" alt="placeholder image" class="img-fluid" />

Or use the equallent css style:

img-fluid {
  max-width: 100%;
  height: auto;
}

and you can also try to set the height and width of the image manually,try to use same width and height!!!!

Creating a round image

2 Answers2