Forum Academy Marketplace Showcase Pricing Features

Circular Images

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…

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.

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

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.

Thanks It worked

I have given the dimensions as you said, but image is not looking a circle