How To Add Border Around Images In Blogger ?

Blogger is a free platform for blogging so it has to lack with some tools. One of which is adding borders on your post’s images. Many bloggers wishes to show border around the images in their post. It makes their images to look cool and more visible. It has different importance depending on your blog.

How To Add Border Around Images In Blogger

In this small tutorial, I will show you how you can add borders on your post’s images and you can also decide the color of border which you want to show.

Add Border Around Images In Blogger

1. Open your blogger’s dashboard. Now go to ‘Template’ and then click on ‘Edit HTML’.
How To Add Border Around Images In Blogger
2. Now click anywhere inside that code box and using the keys Control+F, open the search box.
How To Add Border Around Images In Blogger
3. Write ]]></b:skin> in ther search box and hit enter to find it.
4. Copy and paste the following code just above it.
    /*–www.myonlinedestination.com–*/

.post img
{
     border:1px solid #e3e3e3;
     border-radius:10px;
     padding: 10px;
}

5. Save the template and you are done with it. You will now see borders in your images.

Customization 

  • Change the value 1px to increase the border
  • Change ‘solid’ to ‘dotted’ or ‘dashed’ to change the border style
  • Change e3e3e3 with your color code to change the color of border
  • Change radius:10px to increase or decrease the radius around the corners, change it to 0px to remove it

Add a Comment

Your email address will not be published. Required fields are marked *