How to Create a Rounded Image in Gutenberg (without an External Tool)

Updated: December 18, 2021

Gutenberg, the default editor of WordPress, comes with some elements (called blocks) you can add to either a blog post or page. One of the native blocks offered by Gutenberg is the Image block. As the name suggests, you can use the Image block to add an image to a page or blog post. Although tends to limited when compared to page builders like Elementor and Divi Builder, Gutenberg also offers some styling options to style up your image. One of which, you can create a rounded image.

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.

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.