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;
Buy me a coffeeBuy me a coffee

4 Comments

  1. 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. 🙂

Sorry, comments are closed!