Automatically add rounded corners to your blog images

Todays tutorial will show you how to add rounded corners to your blog images, you can choose to add a small radius or make the image appear circular. This can be a really cool effect for your blog, you can use the code below to add this to any image on your blog.

  1. Log into your blog and access your blogs template. On Blogger search for one of the following codes, the one you need will depend on your template, but each should work.
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    .post-body img, .post-body .tr-caption-container {
    .post-body img {
    .post img {
  2. In between the curly brackets of EITHER of these codes, paste the following to add a round edge
    border-radius: 10px;
  3. You can alter the amount depending on how rounded you want the image to be. If you want the corners to be different you can use this instead
    border-radius: 10px 15px 8px 5px;

Post last updated:

4 responses to “Automatically add rounded corners to your blog images”

  1. thanks! It worked beautifully!

  2. Thank you so much again Ellie, so helpful 🙂 xxx

  3. Jana

    This is perfect! Is there a way to apply this styling to images on a static page instead of the blog posts? For example if I had a page that had post thumbnails and links and I wanted the thumbnails to automatically have rounded corners so I wouldn’t have to make them rounded before uploading–is there a way to do that?

    Thanks! I hope that made sense. 🙂

    1. Hey Jana, a post on how to do this will be up tomorrow 🙂

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.