Make borders for images in HTML

Hi all! Mid-week, so we're staying in shape by teaching another one of our usual HTML tutorials! We've received a few emails asking how you can create those cute borders around the images that you upload on your blog.
So naturally, today's topic is exactly that: how to make borders for images in HTML.


We've come to rescue with a tutorial about how you can make borders for images using directly the HTML script, instead of actually tweaking the picture. This way your pictures remain untouched, while they have a cute little frame on your blog. Problem solved.. everybody's happy:) So grab your tools and let's get on working here!

First thing you need to switch from "Compose" mode to "Edit HTML" mode on Blogger's editor for this post. Then you need to actually upload the picture you want it "border-ed". Mine would be this:


Now i will show you how this picture really looks like in HTML after i uploaded it:


Yup kind of like this! See that text i have underlined for you?? The one saying "border"?? That's the part that actually needs to be deleted and replaced with this one:



style="border: 4px solid #C3C499;"

You can change the number "4" which will result in changing the width of the border, and you can change the "#C3C499" to any other color (you can check an online version of color generator here).
Here's how mine turned out:

Now that's it for today! Hope it helped!!
Check back to see what comes up next in Blogger tutorial section, SEO tips department or how we teach new HTML tricks and tips every day!

Don't forget to sign in our amazing Trolley Cards giveaway while it still lasts!