How to Create Round Image Corners in WordPress

Alienware Area-51 Threadripper Edition

Want to make your images look more stylish? Rounded corners can give them a softer, modern touch. Luckily, WordPress makes this super easy. You don’t need to be a designer or a coding expert. Let’s go step by step!

Why Round Image Corners?

Sharp corners can look harsh. Rounded corners create a softer, more professional feel. They also blend better with other design elements on your site.

Here’s what we’ll cover:

  • Using WordPress Settings
  • Adding CSS for More Control
  • Using a Plugin (Easy Option!)

Method 1: Use the WordPress Block Editor

If you use the Block Editor (Gutenberg), rounding image corners is simple.

  1. Open your post or page in the editor.
  2. Click on the image you want to edit.
  3. Look at the settings panel on the right.
  4. Find the “Border Radius” option.
  5. Adjust the value (higher numbers = rounder corners).
  6. Save your changes and preview.

If your theme supports it, your image should now have rounded corners!

Method 2: Use CSS for More Control

Want more flexibility? CSS is the way to go. It might sound complicated, but don’t worry—it’s easy!

  1. Go to your WordPress Dashboard.
  2. Navigate to Appearance > Customize > Additional CSS.
  3. Add this CSS code:
  
img {  
  border-radius: 15px;  
}  

Click “Publish” and check your site. Your images will now have rounded corners!

Want them even rounder? Increase the number (e.g., border-radius: 30px;).

Alienware Area-51 Threadripper Edition

Method 3: Use a Plugin

If you’re not a fan of code, plugins can help. One great option is Simple Custom CSS and JS.

Follow these steps:

  1. Go to Plugins > Add New.
  2. Search for “Simple Custom CSS and JS.”
  3. Install and activate it.
  4. Add the same CSS code as before:
  
img {  
  border-radius: 15px;  
}  

Save your changes and you’re done!

wordpress tags dashboard

Making Some Images Round, Not All

What if you only want some images to have round corners? Use a class! Add this to your CSS:

  
.rounded-img {  
  border-radius: 20px;  
}  

Now, whenever you add an image in WordPress, click on “Advanced” options and add rounded-img as a class.

Perfectly Round (Like a Circle!)

Want a fully circular image? Set border-radius to 50%.

  
img {  
  border-radius: 50%;  
}  

Just make sure your image is a square. Otherwise, it will look like an oval.

Wrapping Up

And that’s it! You now know three ways to create rounded image corners in WordPress:

  • Use the Block Editor for quick changes.
  • Add CSS for more control.
  • Use a plugin if you prefer a simpler approach.

Experiment a bit and see what works best for your site. Rounded corners can make a big difference in your design.

Give it a try and enjoy your sleek new images!

I'm Ava Taylor, a freelance web designer and blogger. Discussing web design trends, CSS tricks, and front-end development is my passion.
Back To Top