Add Borders to Images

Welcome to Blogging Sueblimely. To keep up with my posts you can subscribe to my RSS feed and follow me on Twitter. Thanks for visiting!

image borders poppy poppy2 thumb red maple thumb amarylis thumb

Inbuilt blog editors make it relatively easy to insert and position 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.

Wordpress add image
Wordpress Insert Image Screen

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

Simple Border

image borders poppy

Inline styling

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

<img src="http://www.imagesite.com/image.jpg" 
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="http://www.imagesite.com/image.jpg"
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.

image borders poppy

Inline styling:

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid  #FF0000; padding:6px;"/>

or
Add to Stylesheet
CSS:

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

HTML:

<img src="http://www.imagesite.com/image.jpg"
class="border-padding"  />

Border, Padding, Colored Background

image borders rose

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

Inline styling:

<img src="http://www.imagesite.com/image.jpg" 
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="http://www.imagesite.com/image.jpg"
class="border-padback"  />

Image Consistency

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.

image borders red maple

Inline Styling

<img src="http://www.imagesite.com/image.jpg" 
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:

image borders red maple

Inline Styling

<img src="http://www.imagesite.com/image.jpg" 
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. If you need to know more about this please read my post The Alt Attribute and Online Public Relations recent post Demystifying Accessibility Myths: The Alt Tag Attribute

Popularity: 12% [?]

Blogging Sueblimely