How to Make Rounded Corner Images in WordPress?

Making rounded corner image with CSS border-radius attribute was a trending design a decade back. Though many people do not pay attention to sharp edges on image nowadays, rounded corners image is still an attractive option. With the new Gutenberg block editor in WordPress, you can easily add rounded corners to images. In this article, we will explain different ways to make rounded corner images in WordPress site.

Image Block Settings

The latest WordPress Gutenberg block editor will open in a full screen mode and hide the block settings by default. Hence, after uploading an image, you can click on the “Settings” icon showing nearer to top right corner of the editor. Go to “Block” tab to find all the settings available for image block. Image block has various customization options available under Styles, Settings and Advanced sections.  

How to Make Rounded Corner Images in WordPress?

You may want to make all images on your with rounded corner or want to apply this effect only on few images. Depending upon this situation, you can use one of the following  methods.

1. Rounded Gutenberg Image Style

Using Gutenberg block editor you can make rounded corner image with single click.

• After uploading image in post editor, check the “Block” settings panel in the right sidebar.
• Select rounded option under “Styles” section to apply rounded corner for the image.

The advantage of this method is that you can visually see the rounded image inside the editor. Earlier, you could also setup rounded as your default style so that WordPress will automatically apply rounded corner to all images you upload. However, this option is no more available in latest Gutenberg editor.

2. Adding Custom CSS with Existing Class

The above method is a super easy way to apply rounded corner instantly to any image you upload on the editor. However, it will apply fixed radius and has a restriction that you can’t change the radius. In order to apply custom border radius, you can add your own CSS class with specific value.

WordPress uses two CSS classes for the images – is-style-rounded for rounded images and is-style-default for the default style. Depending upon your default image style setup, use one of these CSS classes to add your custom border radius value. For example, if you use rounded as your default image style, go to “Appearance > Customize > Additional CSS” and paste the following code:

.is-style-rounded img {
border-radius:10%;
}

In case, if you use the default image style then use the below code:

.is-style-default img {
border-radius:10%;
}

Publish you changes and all your existing images will be changed with rounded corner with 10% border radius.

Related: WordPress troubleshooting guide for beginners.

3. Add Custom CSS with Custom Class

If you do not want to use existing CSS classes then there is an alternate option available for you. Define your own CSS class like .roundedimage and add you code. However, you need to apply this custom CSS class to each image manually in the editor.

• After uploading an image, scroll down on the block settings and click on “Advanced” section.
• Add roundedimage as an additional CSS class as shown below.

Now, go to customizer and add the below CSS code:

.roundedimage img {
border-radius:10%;
}

Publish the changes to view the rounded corners on your images.

4. Using Custom HTML for Single Image

The problem in adding additional CSS is that it will load on each page. This is not preferable when you want to use rounded corners for only few images on your site. In this case, you can the Custom HTML block to add custom CSS code only for a specific image.

• Upload an image and make sure you are using default style.
• Click on the three dots button and choose “Edit as HTML” option.

• Add the following code at the start of the HMTL block.

<style>
.is-style-default img {
border-radius:10%;
}
</style>

• It should look like below in the editor:

• Again, click on the three dots button and choose “Edit Visually” option.
• You will see an error message like below indicating the block contains invalid content as you have added HTML code in image block. Click on “Convert to HTML” button.

• Now, WordPress will convert the image block to a Custom HTML block.

• Click on the “Preview” button to view the visual preview.

This is useful to load the CSS only on this page and you can follow the same method to create rounded corner images on different pages. In addition, there are plugins like Autoptimize to cache inline CSS to increase your page loading speed.

Learn more about using CSS rounded corner elements in Weebly site.