How to Add Border on Image in Blogger

Are you looking to add border to your images in Blogger? Sometimes adding border to images can make them standout in your content. Recently, one of our users asked us how to add border around an images in blogger. Though, it is very simple and can be done easily but new bloggers find it difficult. In this article, we will show you how to add border around an image in blogger.

To add border around images you need to write simple codes of CSS. With these codes you can easily add different kinds of borders having any colors that you want.

The very first thing you need to do is to login to >> Template >> Edit HTML >> Search for the b:skin>> tag. After finding the skin tag, just above it paste the following code:

.post img {
border:5px solid #d2d2d2;

In the above code you can change the #d2d2d2 with any other hex color to alter the color of your border. You can also increase the above 2px to a higher number to increase the blank space arround the border.

Furthermore you can also use different types of borders in your images, following are some border types that you can use:
  1. solid: Defines a solid border
  2. dotted: Defines a dotted border
  3. dashed: Defines a dashed border
  4. double: Defines two borders. The width of the two borders are the same as the border-width value
  5. groove: Defines a 3D grooved border. The effect depends on the border-color value
  6. ridge: Defines a 3D ridged border. The effect depends on the border-color value
  7. inset: Defines a 3D inset border. The effect depends on the border-color value
  8. outset: Defines a 3D outset border. The effect depends on the border-color value
Once you are done customizing your image border, press the "Save Template" button present at the very top of your screen. 

We hope this tutorial may have helped you in learning how to add border around an image in blogger. Though the technique is very simple but still for beginners it might be a very tough task. However, share your thoughts below and also share it on Facebook, Google+ or Twitter

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


June 25, 2015 at 11:55 PM

Thanks! Looking for this. Other bloggers giving so much code.

July 8, 2016 at 5:28 PM

Thanks, it helped

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.