# Need to make image round

**URL:** <https://community.hubspot.com/t/need-to-make-image-round/21627>\
**Category:** CMS Development\
**Created:** [June 11, 2020, 7:44pm UTC](https://community.hubspot.com/t/need-to-make-image-round/21627 "2020-06-11T19:44:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bshirshekar1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bshirshekar1/32/9373_2.png) [@bshirshekar1](https://community.hubspot.com/u/bshirshekar1)\
**Post date:** [June 11, 2020, 7:44pm UTC](https://community.hubspot.com/t/need-to-make-image-round/21627/1 "2020-06-11T19:44:50Z")

</div>

Can anyone tell me where I add the border-radius:50% to this code to make the images in this module round?

 ![28055iB15E6110ED053D2C.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/d/3de50f7ddd1ac7128153fbc7fafd2a9f91b58174.jpeg)

---

<div class="post-metadata">

**Author:** ![Chris-M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chris-m/32/61599_2.png) [@Chris-M](https://community.hubspot.com/u/Chris-M)\
**Post date:** [June 12, 2020, 12:28am UTC](https://community.hubspot.com/t/need-to-make-image-round/21627/2 "2020-06-12T00:28:11Z")

</div>

Hi @bshirshekar1,

you have to add it to the:

\<img src=“{{ item.image\_field.src }} alt=”{{ item.image\_field.alt }}" {{ sizeAttrs }}\>

you could do something like this

`<img src="{{ item.image_field.src }} alt="{{ item.image_field.alt }}" {{ sizeAttrs }} style="border-radius:50%;">`

**but…**

with the {{ sizeAttrs }}, you will get a style command for height and width (style=“height:xx; width:xx)” which will get overwritten by the style=“border-radius: 50%”; since both are full style=xx commands and this comes last.

Better way is to take the css class “customer-team-inner-item” and give the img the border radius:

```auto
.customer-team-inner-item .image img {
 border-radius: 50%;
}

```

with this you can still keep the size attribute of the image {{ sizeAttrs }};

- Chris

---

<div class="post-metadata">

**Author:** ![Roworo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/roworo/32/60590_2.png) [@Roworo](https://community.hubspot.com/u/Roworo)\
**Post date:** [June 12, 2020, 9:05pm UTC](https://community.hubspot.com/t/need-to-make-image-round/21627/3 "2020-06-12T21:05:02Z")

</div>

On the line #18, it should be like:

`<img src='{{ item.image_field.src}}' alt=' {{i tem.image_field.src}}' {{sizeAttrs}} style='border-radius: 50%'>`

But if you want to make it more dynamic you could use the number\_field:

```auto
<img src='{{ module.image_field.src }}' class='myImage'>

{% set border = module.number_field|string ~'%' %}

<style>
.myImage{
 border-radius: {{border}};
}
</style>

```

With this you can set the radius dynamically, you have to put the ‘style’ tag on the HTML+HUBL section, because the .css section won’t recognize the ‘{{border}}’

---

<div class="post-metadata">

**Author:** ![bshirshekar1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bshirshekar1/32/9373_2.png) [@bshirshekar1](https://community.hubspot.com/u/bshirshekar1)\
**Post date:** [June 13, 2020, 12:31pm UTC](https://community.hubspot.com/t/need-to-make-image-round/21627/4 "2020-06-13T12:31:11Z")

</div>

Thank you - I updated line #18 to \<img src=‘{{ item.image\_field.src}}’ alt=’ {{i tem.image\_field.src}}’ {{sizeAttrs}} style=‘border-radius: 50%’\> and it worked perfectly!

---

<div class="post-metadata">

**Author:** ![TCrause](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@TCrause](https://community.hubspot.com/u/TCrause)\
**Post date:** [June 7, 2022, 2:42am UTC](https://community.hubspot.com/t/need-to-make-image-round/21627/5 "2022-06-07T02:42:06Z")

</div>

Hello - I dont understand where to add this code? Can you please advise?