# Circle image became square

**URL:** <https://forum.pinegrow.com/t/circle-image-became-square/5571>\
**Category:** Styling (CSS)\
**Tags:** css\
**Created:** [August 25, 2021, 1:59pm UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571 "2021-08-25T13:59:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![vincentba](https://avatars.discourse-cdn.com/v4/letter/v/90db22/32.png) [@vincentba](https://forum.pinegrow.com/u/vincentba)\
**Post date:** [August 25, 2021, 1:59pm UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571/1 "2021-08-25T13:59:20Z")

</div>

hi to all i have an image circle, after i put wordpress get avatar i can’t control height and width and image became square

 ![1](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e94a03bec81a1fda09dd850b6eb0ab6009377b3c.png)  
 ![2](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/aa429ba11dc1f57fc0f30fa878ecacd4e7e7d470.png)

i try border-radius: 50px but nothing happend

thanks in advance

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 25, 2021, 2:29pm UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571/2 "2021-08-25T14:29:48Z")

</div>

Hi @vincentba,  
If you could share some of your code it would be helpful. Otherwise it would be a guessing game with a lot of possibilities.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![vincentba](https://avatars.discourse-cdn.com/v4/letter/v/90db22/32.png) [@vincentba](https://forum.pinegrow.com/u/vincentba)\
**Post date:** [August 25, 2021, 5:59pm UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571/3 "2021-08-25T17:59:34Z")

</div>

it’s the first time i post some code on forum, image are good or you need other?

thanks in advance

 ![3](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/115a6839dd8c8162510e850a9100ffd6a5d06028.png)  
 ![4](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9cef3d4d89c97d6d8724382b3c0ab7c9954ab479.png)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 25, 2021, 6:17pm UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571/4 "2021-08-25T18:17:33Z")

</div>

Hi @vincentba,  
Your code is partially helpful. I actually would like to see both the DOM tree and also the WordPress action block. Just guessing, the probable problem is that you have applied the `wp-get-avatar` action to the image that also has the styling to give it a rounded border. You need to put the image inside an outer container so that you don’t replace the inline styling when you replace the image. Make sense?  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![vincentba](https://avatars.discourse-cdn.com/v4/letter/v/90db22/32.png) [@vincentba](https://forum.pinegrow.com/u/vincentba)\
**Post date:** [August 25, 2021, 9:53pm UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571/5 "2021-08-25T21:53:27Z")

</div>

this is the DOM

 ![Generic placeholder image](http://pinegrow.com/placeholders/img6.jpg)
## Heading

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.

View details »

 ![Generic placeholder image](https://images.unsplash.com/photo-1628682814461-c4461c974211?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMDkyMnwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyOTgzOTg5Mg&ixlib=rb-1.2.1&q=80&w=1080)

 ![](http://pinegrow.com/placeholders/img16.jpg)

I try to put image inside a div and set “get avatar” on the image and imageis always square, after i create a container and i put image inside, and set get avatar on image, but both are square

 ![5](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f2302b9fd865cea6f7874926d64ee76bb43feed0.png)

thanks in advance

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 26, 2021, 10:01am UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571/6 "2021-08-26T10:01:04Z")

</div>

Hi @vincentba,  
So, the DOM is from the Tree panel - it is a hierarchical representation of the HTML code on the page. Right now, I think, your code is set-up like this:  
`<img src="..." style="border-radius: 50%;..." wp-get-avatar>`  
So, if your WordPress action is set-up to replace the element, It will also remove that style attribute. You need code something like:

```auto
<div class="avatar-image">
    <img src="..." wp-get-avatar>
</div>

```

Again, with the WordPress action targeting the element. And then in you stylesheet have a rule like this:

```auto
.avatar-image img {
    border-radius: 50%;
}

```

Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![vincentba](https://avatars.discourse-cdn.com/v4/letter/v/90db22/32.png) [@vincentba](https://forum.pinegrow.com/u/vincentba)\
**Post date:** [August 26, 2021, 11:38am UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571/7 "2021-08-26T11:38:24Z")

</div>

> [@RobM](#):
>
> `avatar-image`

thanks in advance, i try but no change

 ![6](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/ef598df5b6dba70ee37e017ebf745d1a9b708207.png)  
 ![7](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2d344875be51f3d9f6c8c55f42b7c8b6aa4f59fe.png)

---

<div class="post-metadata">

**Author:** ![vincentba](https://avatars.discourse-cdn.com/v4/letter/v/90db22/32.png) [@vincentba](https://forum.pinegrow.com/u/vincentba)\
**Post date:** [August 26, 2021, 11:43am UTC](https://forum.pinegrow.com/t/circle-image-became-square/5571/8 "2021-08-26T11:43:59Z")

</div>

> [@RobM](#):
>
> ```auto
> .avatar-image img {
> border-radius: 50%;
> }
> 
> ```

i have solved following putting css rule inside style.css

```auto
.avatar-image img {
    border-radius: 50%;
}

with inline style no work, with rule in css works, thanks a lot
```