Is there any way to make images circular for my app for free ?
To make an image appear as a circle, firstly make sure the image element is perfectly square to begin with and either set to fixed width or, if responsive, set to ‘keep element proportions as the page is resized’.
Then set the border roundness to at least half of the width of the element (if it’s fixed width then half will be fine, if it’s responsive and doesn’t have a max width then make it more than that to account for a larger size when the page is stretched).
For example, if your image element is sized at 200x200 and is fixed width, set the roundness to 100 (or higher) for a circular image…
1 Like
The best way to get your circular images looking as crispy as possible is to use a group and set the image as its background. Then set the roundness as such that it becomes a circle.
1 Like
Ok I will try to
Try using Imgix processing on the image
Select the “Apply the Circle/Ellipse mask” option.
Setting the roundness will work as well
1 Like
For viewing the Circular images on page,
add Image element and apply border-style to the all the borders into solid and make it Roundness into 100.
It will show like circular image.
URL : https://pdfwork.bubbleapps.io/version-test/circularimage
Thanks It worked
Hi,
Kindly ensure the source image width & height. if any is not satified then circle will not come.
Please refer below,
that’s clever
What worked for me was looking at the profile images here on the bubble forum that are round.
I used inspect element to see the CSS. I saw that to achieve the circular images, each border corner radius is defined independently and set to 50% of the width of each side
First, make sure the image element is square. I set the height and width to 45px.
Then set the border radius of each corner to 22 which is roughly 50% of the width and height of the element.
Resulting in a circular image!! 
Thank you to @redoanahmed14321.fru for posting the question and others for their answers! 