Someone was recently inquiring on the Blogger help group about adding a colored border to their photos.
Adding a border to an image is rather simple. To add a border to a photo, you will use the border property.
If you are doing this in Blogger, first upload your picture to Blogger. Once you’ve done that, switch the post editor into Edit HTML mode, and from there you can see the photo’s URL inside an <img>. Simply copy that URL, and then replace http://photo.jpg in the code below with the url to your image.
<img src=”http://photo.jpg”alt=”My Photo” style=”border: 1px solid #000000;”>
Next change the 1 px to the size you want the border – EX: 4 px ( is the size I’m using in the photo below) and change the solid #000000 to the color you want the border on your photo.
If you want border around all your photos in blog posts, you can log into Blogger, go to template – edit html and do a search for something that looks like this:
.post img {
padding: 4px;
border: 1px solid #cccccc;
You can customize the border on all photos by changing the padding (4px), the border (1px) and the color number to whatever you want. Padding ads some space between the photo and the border. Play around with it and see what you like, but be sure to back up your blog before making any changes to your template.
If you liked this post, why not buy me a coffee?
RSS
5 responses so far ↓
Wrote: Jan 8, 2008 at 10:21 pm
Great! THANKS Rose, this is what I’m looking for! This is what I need. You’re great! Can’t wait to try this!
Wrote: Apr 30, 2008 at 11:54 pm
Wow – I finally found some information that I can try to add borders around my pictures on my blog! I am a very timid and beginning blogger who has very few computer skills, and hopefully in the next day or two I am going to try this – altho it looks very hard if you ask me! (and what do you mean by “be sure to back up your blog first”???) But very glad to have found this – and if I could buy you a cup of coffee, I surely would!
Diane from Michigan
Wrote: Jun 14, 2009 at 3:07 pm
This was great. The only thing I suggest is to mention that if you don’t have this code to change you need to add it. I found I did not have it at all in my template and when I added it I got the borders I wanted. All the helps said to “look for this” but my problem was I didn’t have it, I had to “add” it. I am very happy now. Thanks alot!
Wrote: Jun 20, 2009 at 7:37 am
Rose,
I can’t tell you how much I appreciate your simple, straightforward instructions!! I just used this tip on my moms blog, and now I will be doing it with mine!
Thank You:)
Courtney
Wrote: Aug 20, 2009 at 8:37 am
Hi,
i just applied the code to my template and the few times I added photos everything went find. But now some of my posts have bordered photos and others not. Can you think of anything that may cause it?