In web design, you can create a rounded image by setting the border radius of the image. Most page builder plugins (including Elementor and Divi Builder) have a setting option to set the border radius of an image. Gutenberg has no setting option to set custom border radius. Instead, it offers two pre-styled shapes: default and rounded. Choosing the default shape means your image will be displayed according to its original shape (e.g., rectangle).
Conversely, if you choose the rounded shape, your image will be displayed in a rounded shape. But in order to have a rounded shape, the original shape of your image should be in square.
Meaning that the height and width of the image should be the same (e.g., 600×600 pixels). Luckily, Gutenberg has a simple built-in editing tool to create a square image.
How to Create a Rounded Image in Gutenberg
Although Gutenberg has an editing tool to create a square image, you can use a dedicated image editing tool like Photoshop to create a square image with a more precise dimension. GIMP is a great free alternative to Photoshop if you are looking for a free image editing tool.
In this example, we will use the default image editor of Gutenberg.
Start by creating a new page (Pages -> Add New) or edit an existing one. Once the Gutenberg editor opens, add a new Image block. Upload the image you want to use.
Once the image is uploaded, click it to open the settings bar. On the settings bar, click the Crop icon.
You will three more icons after clicking the Crop icon. Click the Aspect Ratio icon and select the Square option.
Select the image part you want to retain by dragging it downward or upward. Once done, click the Apply button to apply the change.
Wait a moment until Gutenberg is done cropping the image. Once done, go to the settings panel. On the Styles settings block under the Block tab, simply select the Rounded option.
To resize the image, you can open the Image settings block. Or, or you can also do so by dragging the edge of the image on the Gutenberg editor.
To set the alignment of the image, you can simply click the Alignment icon on the settings bar. There is also a setting option to apply a duotone filter if you like it. If you have CSS knowledge, you can further style up the image via custom CSS.
The Bottom Line
The Image block is intended to add an image to either a blog post or static page of WordPress. It is one of the default Gutenberg blocks. When adding an image using the block, you can apply some stylings, including turning the original shape into a rounded shape.
The prerequisite to create a rounded image in Gutenberg is the original shape should be in a square shape. Gutenberg has a built-in feature to crop an image into a square shape so that you don’t need to use an external tool like Photoshop or GIMP only to crop the image.
