Saturday 25 July 2015

Tagged under:

How to Add Border on Image in Blogger


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 Blogger.com >> 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;padding:2px;}

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:
solid: Defines a solid border
dotted: Defines a dotted border
dashed: Defines a dashed border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
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.

0 comments:

Post a Comment