How to Add Borders to Images in Blogger

Inserting or adding  images  to Blogger  is necessary to emphasize more of what we are going to deliver to  our rreaders. And in order to make this photo more proffessional in looks and be different from others, we will add borders on it.  Here, in this article I will share to you how to add border(s) to an individual image using HTML .
Before we will go to the steps, let me show you first the different border attributes or styles namely: dotted, dashed, solid, double, groove, ridge, inset and outset. See the demo below:

Dotted	Dashed	Solid	Double
Groove	Ridge	Inset	Outset

Now you have seen those different border styles, it is now time to proceed to the tutorial. Please follow the steps below:

How to Add Borders to Inserted Images in Blogger

Note:

You must have to know first how to get the  image link (url) of your uploaded images  in Blogger before you can apply this trick. Please click this link for assistance.

Step 1. Go to Blogger Dashboard
Step 2. Select a certain post or  you may choose some published posts with images that you want to add borders on it.
Step 3.  Copy the HTMLcode below and paste it in your Blogger Post Editor page. (Your page editor must be switched to HTML Mode).

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzArU1coZZpEOtyX6nP1EZeFnE5k7wGDLGwtXEp8b87SBnINqE9d_GsJBGdXDqMh1PRPMBJxc0zkxhgej-ArTasQanU34iyy5_dlKmX3EQjdRZqAHMDTRZY2m4WcyktxEAi0Ri3q5ZU8c/s1600/add+borders+to+blog.png" style="background-color: white; border: 3px dashed orange; margin-left: auto; margin-right: auto; padding: 1px;" />

Customizations:

- Replace the black bolded texts w ith image link (url) of your photo.
- Background color is white, you may change it according to your blog's color.
- Border attributes here are 3px which the size, greater numerical value will mean a larger size also. Dashed is the border style, you can change it with the different border styles as  shown in the demo above.  And orange for the color of the border.
- For the padding, greater numerical value will make your borders to pull out from your image. See the demo below

Note:

The first image has a padding of 10px while the second one has only 1px.

Step 4. Publish or update  your post and you are done. Congrats! :-)
Peace Buddies!!!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook