So like I said in the previous tutorial, there are three ways of doing this right?
I already showed the first two ways of doing this (the easiest ways) and now
it's time for the last possible way. Ready?

Okay. I'm pretty sure that I stated in the previous tutorial that we're going to be using the < div > tag to do this, correct?
Basically, all we're going to do is create a box that is the same size as your image and we're going to put the image over. To get the image to have a border, just add padding! Let's start shall we?

Example: 
< div style="width: 100px; padding: 10px; background-color: #ff9999;"/ >
< img src="http://media.tumblr.com/74ad6ca792fbd470865e7cf246027131/tumblr_inline_mh6p3wWFuo1rcnzmh.png" style="height: 100px; width: 100px;"/ >

When making your box, if you're wondering why you don't need height, it's because making a box with the < div > tag is just like making a box with the < p > tag. The height isn't necessary because it'll expand by itself as you hit Enter or Shift+Enter. And as you can see, by using the < div > tag, we have a border around our image with sharp corners instead of slightly rounded corners like the two from before.

Edit: ignore the space under the image. :p