In this tutorial, you will learn how to put images into a circle or a square using aspect ratio in Elementor Pro (or Elementor FREE) and CSS!
Keep reading or watch the video below:
I am using Elementor Pro version that enables me to directly put my CSS code in the widget section.
If you are using Elementor FREE version, you can use one of the free plugins to put your CSS code there. Like this Simple Custom CSS and JS plugin.
Now let’s see how to make our images square or circular!
1. Start by using the image widget
Place your photo using the image widget and setting the ‘image size’ to ‘full’.
2. Go to ‘Custom CSS’ field if you are using Elementor Pro
If you are using Elementor Pro, go to the ‘Custom CSS’ field of the ‘Advanced’ section of your image widget. If you are not using Elementor Pro, but a free version, you can add this code through a plugin, such as Simple Custom CSS and JS plugin.
In this ‘Custom CSS’ field, let’s add the following code to create a SQUARE image:
selector img{
width: 400px;
aspect-ratio: 1;
object-fit: cover;
}Let’s see what these lines of code mean. You can set the ‘width’ to any size you want. ‘Aspect-ratio’ is set to 1, which means that the sides are equal. This will create the actual square. The ‘object-fit’ property set to cover will make sure that the image is not distorted or deformed and that it will keep its original proportions. Setting it to ‘cover’ means that it will fit the width of the container. We can also set it to ‘contain’ which will fit the height of the image to the height of the container.
To make the image ROUND and put it in a circle, we simply need to add ‘border-radius’ property set to 50%. This is how the code would look like in that case:
selector img{
width: 400px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
}Now we have a circular image!
3. If you are using Elementor FREE…
What happens if you are using Elementor FREE version? In that case, the ‘Custom CSS’ field will be disabled. That means that you should place your CSS code through a plugin such as Simple Custom CSS and JS plugin.
4. Give your image a CSS class
Go to the ‘Advanced’ tab of your image widget and ‘CSS classes’ field. Simply give your image class a name and type it here without a dot (‘.’) and spaces. So it can be something like ’rounded-image’ or any other name you like.
5. Style this class using a CSS code through a plugin
Remember this class name and use a plugin I suggested to input your CSS code (Simple Custom CSS and JS plugin). After installing and activating this plugin, go to your Custom CSS and simply add the code from above, just instead of ‘selector’, use your class name with a dot (‘.’) before it.
In case of the class name ’rounded-image’, the code would look like this:
.rounded-image img{
width: 400px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
}And that’s it! Now you can go ahead and apply this class to multiple images on your website. You are able to then simply change the width from a single place and make all those images rounded and circular by simply giving those images this class name!
Online course
Ready to Learn CSS?
A step-by-step basic online course for beginners and non-coders with 50+ practical exercises to get you started with CSS.
- No HTML
- Interactive
- For non-coders
*This post may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale, with no extra cost to you. That way you are supporting my blog and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.
