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:





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!

58 comments:

Twincerely,Olga said...

Hi there!! sayin hey from SiTS!!!

Sarah @ Modern Country Style said...

I LOVE your tips. Really, really love!

Thank you so much.

Sarahx

MultipleMum said...

You are a clever thing, aren't you!

Kim-A Creative Spirit said...

I am having SUCH a tuff time creating a blog button. Can it only be created in PHOTO SHOP (I have elements) or can it be done in another program....

Thanks for all your tips as I LOVE THEM

Mama.Mommy.Mom. said...

Thanks for the follow! I've been following you guys for several weeks now and really enjoy the content!

Diana Mieczan said...

I always wanted to try this:) kisses, my dear

Ps: I am hosting a sweet GIVEAWAY today :) Hope you will join in :)!!!

Edwards Girls said...

Following you back from http://whatifedmyfamilytoday.blogspot.com/
Can't wait to learn great blogging stuff from your blog!
Thanks, Jeanette :)

Diane said...

You have a wealth of information here. Thanks so much. I have your blog saved Ü

Thanks for visiting me over at Pittypat Paperie.

Unknown said...

You have such fantastic info! I'm so glad you found me so that I can usurp all your knowledge!!! :)

Jill {Sweet Diva} said...

Thanks for visiting my blog....returning the follow!
Jill @ Sweet Diva

Nicole Bouchard Boles said...

Am already a follower, however just dropped in to say "hi" from www.everydayphilanthropistblog.com "Doing Good" blog hop.

Missy said...

Great tutorial! My blog needs a makeover! Love all the stuff on your blog! Thanks for following me at papertreats. I am following back!

SurvivorDiane said...

New follower. I am already learning from your tips. Thanks for willing to help the beginners!

Diane from survivordiane.blogspot.com

Unknown said...

Hi there! I am following you back! Thanks so much for stopping by!! Great stuff here!! Have a wonderful day!!
Alissia
Tips 4 Green

Unknown said...

Thank you for posting and hopping!
T♥

Expat Life and Style said...

Hi Design it chic. Thanks for stopping by my blog with your comment and following too.

Love your blog, I need some guidance in HTML so this will be great for me. Now following you too, thanks.

Steph @ This Organized Mess said...

Following you back from Welcome Wednesday !! I am glad you found me cuz I LOVE this blog !!!

Anonymous said...

Thanks for following. I am now following you back. I love your site.

The Soul Mom said...

The Soul Mom is blog hopping and following you! Hope you’ll hop and follow back! www.thesoulmom.com awesome tips. I love it.

Unknown said...

following you threw3 the bog hop i need to learn this thanks for having a great blog ter

Hollywood Glamorous said...

Thank you for stopping by my blog :) I've been a follower. Thank you also for the tip offers.

Cori said...

I always love HTML tutorials, because I am so not HTML savvy!

Unknown said...

I am a follower of your blog. Thought I'd stop by to say "hi" from Keepin Company Thursday.
Stop by if you get a chance. =)
http://joyfulhousewife.com/2010/09/keepin-company-thursday/
Looking forward to following you around. =0)
-Melanie
Joyful Housewife

Candice S. said...

Good Morning,

You have a beautiful blog that I enjoy reading on a weekly basis. ☺ You inspire and move me with your creativity and your spunk. On that note, I want to present you with an award, “The Versatile Blogger” Award. You have earned it!

Go here to accept your award:

http://rattlesandredheads.blogspot.com/2010/09/i-won-blog-award-oh-yaaaayyy.html

Have a great day and.. Happy Creating!

Candice S.

aumie said...

Thank you for the tips! Following you from Buzz on By. Have a great day!

Liz said...

Great tutorial! Thanks for following me, I follow you too!

Icy BC said...

Thanks for visiting, and I'm following right back!

Cindy said...

SOOO glad you popped over to see me! I am your newest follower and trust me when I say this... I WILL BE STALKING YOU (not in a bad way)to learn more stuff !! LOL

Cindy
http://cindyseesit.blogspot.com/

Krysten said...

Hey Design it Chick! Following you back - thanks for the comment! Great blog and great tutorial!

Best,
Krysten
http://clickableparty.blogspot.com

Hanna said...

Thanks for the following! I'm following back - love your content, too! Can't wait to have time to look over everything!!!

Tammy said...

I have always made my borders on photobucket but this looks way easier...thanks for the tip!

Mama Chocolate said...

Thanks for following! I'm following back! :-)

Becky Jane said...

Following you back!
Thanks, Becky Jane
Raising kids can be a lot like weeding the rose bed...well worth it, but...OUCH!
http://myelevenreasons.blogspot.com/

Lynda Coker said...

Thank you for visiting COLORCRAZED. Following you and looking forward to looking around your lovely blog.
Lynda

Shandal said...

Great tip!

Lindsay said...

EXCELLENT tip!!

Going to try it now with, well, every picture I've posted...well, this week. :) THANK YOU!

Now following via Friendly Friday!

http://www.MeantToBeMAMA.com

A Mother...Again said...

I was just looking for info like this the other day - following along with YOU now! Thanks for the tips!

Wish I had found the Friday Hops a few months ago!

Jessica said...

Thank you Thank you for your blog! I love finding these types of websites for help! Going to try some stuff out now.

Found you on New Friend Friday from Trendy Treehouse!

Elizabeth said...

Great tutorial! Stopping by to say hi and following from Fun Follow Friday.

http://bethscoupondeals.blogspot.com/

Tena said...

must be my lucky day, I have been curious about this for like forever and I come across you from Friendly Friday Follow! Consider yourself stalked! HA HA HA! Really all that means is I am your newest follower, lol

<3Tena

Pris said...

I'm following from Friendly Friday Follow! Love what I see so far, and I am looking forward to seeing what you come up with in the future! Check out my sites and follow me back at:
www.scrapartbypris.blogspot.com
www.benterudbookshelf.blogspot.com
Thanks! Pris

Unknown said...

new follower hope you follow back :)

www.thebabybottomline.com

I have a blog hop too :)

Ruthie J. said...

HTML is the bane of my existence. LOVE your blog. Trying to follow but Google is having connection issues. I will check back. I've bookmarked your site!

Ruthie Joyce
www.mysocalledhomeschoollife.com

Unknown said...

Well, I was going to award you with this very blogger award! Even thought I left you a comment yesterday with the wrong link. Anyway, I know you already have it, but you are listed here: http://bit.ly/989Yzn. I really appreciate all your tips. They're very helpful!

Thanks, Jodi

David said...

new follower

WCA Yash Travel said...

Hi, thanks for following me and returning the love
http://gustosa-giveaways.blogspot.com/

ANKH said...

I'm hopping in on my first ever blog hop! :) I'm following from Tuesday Blog Hop by Nimbler Grove!

I look forward to learning more tips from you! I'm pretty good at this stuff. But I am kinda rusty.

~ANKH
henthornehandmade.blogspot.com

Marci said...

Stopping by from Tuesday's Blog Hop. I am your newest follower.

www.thewhitewhimsies.blogspot.com

Carries Rambles said...

HI!
Found you on FMBT and am following you now! Thanks for the tutorial

www.carriesrambles.com

Jacqui said...

I am your newest follower from the Follow Me Back Tuesday Blog Hop! Would love it if you could follow one or all of my blogs!

www.singleparentretreat.com
http://singlemamachallenges.blogspot.com/
http://motherdaughterconnection.blogspot.com/

Thank you!

Jerri at Simply Sweet Home said...

Hi. I'm your newest follower from the blog hop. Hope you will follow me back!

http://www.simplysweethome.com

Romanian Princess said...

Just following your cute blog from Follow Me Back Tuesday! Please follow me back @ www.romanianprincess.com

Thanks, Nicole Mariana

Amanda said...

Just wanted to say THANKS for all the tips! I have been making borders for my images and also having links open in new windows. It's great! As a fairly new blogger, this stuff is super helpful!

Anonymous said...

ok, question: how would i do a border around a picture...with a background image?

thx for all the free tips :)

Michelle @ Military Wives Saving

Unknown said...

I'm going to try this out.

Thanks for stopping by my blog. Midweek Mingle is a fun one.

Unknown said...

i am your newest follower from blog hop tuesdays. check out my blog and follow me back if you get a chance. http://mizzreviewlady-mommyreviews.blogspot.com/

Lucy said...

Am soooo trying this!! THANKS!!! :D xx

Merry said...

Thanks so much for this wonderful tutorial.