» » How to Add Border around image in blogger posts

How to Add Border around image in blogger posts

Are you looking to add border in your blogger post's images? Then you are at right place, as this article will explain about the same that how you can add border around an images in your blogger posts using CSS. This will take just 5 minutes to done as it is too simple and easy. Just follow the easy steps given below to add border to your blogger posts images.









Go to blogger dashboard >Template > Edit HTML
Press CTRL + F  to enable search box  and search for ]]></skin> tag.
After finding the skin tag, just above it paste the following code:

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

- You can change color of the border by changing #d2d2d2 with any other alter hex color.
- If you want to increase the blank space of your border just increase higher number with 2px in above code.
You can also use different types of borders in your images, following are some border types that you can use in above code.
  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 with the customization, Click Save Template   and you're done!


Copyright © Celeb Tatoes