If you ever noticed, some websites use rounded images on their team page or about page. Beneath the rounded image, you usually see the social icons that link to the social media accounts of each team member.
In Elementor, you can also create a rounded image like the ones on the screenshot above. However, Elementor offers no specific image setting to turn a rectangle/square image into a rounded one. You need a little trick to create a rounded image in Elementor. When adding an image in Elementor, you can set the values of the border radius. To have a circle-shaped image, you can set the values of the border to a certain number, according to the dimension of your image.
Tips: To get a perfectly circle-shaped image, you can use a square image instead of rectangle.
Let’s get started.
First off, add an image by dragging the Image widget to the canvas area and select an image from your computer.
Once the image is added, go to the Style tab to customize it. As mentioned, to get a circle-shaped image, you can set the values of the border radius. The values are vary depending on the dimension of your image. For example, for an 800×800 image, you can set the values to 260 (all corners: top, right, bottom, left).
In addition to border radius, there are several other settings you can apply to your image. Elementor also allows you to set the brightness, contrast, saturation, and hue of your image. You can find those settings by clicking the CSS Filters option. Just play around with the left panel to figure out what kind of things you can do with your image.