How To Add Borders to Images On Blogger

Knowing blog editors make it relatively easy to insert and position many images in posts but you can add some additional styling elements and make them more interesting. The WordPress insert image screen (Appearance tab) allows you to add inline styling for individual images In Blogger you have to enter the CSS styling manually. If you have a particular style that you are going to use regularly it is simpler to add the a class to your CSS styling. I will explain this more as I go along.


Firstly I will show you now how to just add a simple border to your images and then I will build on this to create some different effects.

Inline styling

The html for an image with a solid border, 1px in width, color #FF0000:

<img src="#"
style="border:1px solid  #FF0000;"  />

Blogger - Add your image as usual and in your post html edit tab add all the colored code above after the image location and before the />

WordPress – In the ‘Insert Image’ window (Appearance tab) – enter the width of border you require to the ‘Border’ box (1 in this example).

This will produce a black border. To alter the color of the border enter border-color: #FF0000; in the Style box. (There is no need to add the code in orange (style=" and ")as this will be added automatically.) You can also add styling by editing in the post html window as in the instructions for Blogger above.

Add Code to Stylesheet

If you are going to use this same formatting regularly add a class to your CSS styling instead of the Inline method above (edit your style.css for WordPress, Layout/Edit html window in Blogger). Use a descriptive class name and you are more likely to remember it easily:

.border-red {border:1px solid #FF0000;}

When you want to use this border style – insert your image as usual and then add the the class in the html tab. From the example above:

<img src="#"
class="border-red"  />

Border with padding

Follow the instructions as above but add padding to the outside of the image. The color between the image and the border will be the same as your post’s background color.

Inline styling:

<img src="#"
style="border:1px solid  #FF0000; padding:6px;"/>

or
Add to Stylesheet
CSS:

.border-padding {border:1px solid #FF0000; padding: 6px;}

HTML:

<img src="#"
class="border-padding"  />

Border, Padding, Colored Background

The same as the prior image except for the addition of a colored background:

Inline styling:

<img src="#"
style="border:1px solid #5A750C; padding:6px;
background-color:#CCCCCC;" />

or
Add to Stylesheet
CSS:

.border-padback {border:1px solid #5A750C; padding:6px;
background-color:#CCCCCC;}

HTML:

<img src="#"
class="border-padback"  />

If you have various size images in a post you can standardize the size by adding borders and padding to smaller images to create an overall size matching your larger image. This time I have only included code for inlne styling as the padding will vary from image to image.



Inline Styling

<img src="#"
style="border:1px solid #FF0000;
padding:40px 78px 40px 78px;" />

You could get a bit fancier by increasing the width of the border and adding background color:



Inline Styling

<img src="#"
style="border:1px solid #FF0000;
padding:35px 70px 35px 70px;
background-color:#F5F5F5;" />

I have not included the ‘alt’ tag in the html coding here for the sake of simplicity. It is always worth adding this for accessibility and search engine reasons.