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 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
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.
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
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.
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:
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: 30% [?]
thank you for posting this Sue I have been trawling the internet for simple coding to chnage my blogger borders.
I discovered Piknik last night but I really wanted simple borders.
Trishs last blog post..Weekly winners
can I ask your advice about different comment applications for Blogger/Blogspot and what can I do to have the comment window open and click the commenters links.
Presently it opens in the same window with a new tab -but only small window.It is so annoying to open complete new window.
Trishs last blog post..Weekly winners
The pop up comment windows are a nuisance aren’t they. I always use Firefox so cannot remember if the same problem occurs in IE.
To control javascript popup windows in Firefox Go to: Options/Content/Enable JavaScript – Advanced button. Make sure “Allow scripts to: Move or resize existing windows” is not selected.
Sueblimey – great post – very clear.
Great post, another great tutorial that I can use for my website. I love the detail, thanks for the hard work.
Hi Sue,
Gee whiz please forgive me on being so late. Wow trying to do this in the truck is almost impossible.
And DUH…I just figured out that I can click on the add you purchased and do a drop.
Oh the blond sometines…LOLZ:-)
Shinades last blog post..Pollination
Great post! And I agree with Tool Belt. This is an excellent tutorial that I can use for my website! I really appreciate individuals like you that take the time and effort to explain things to people like me.
When will Blogger get around to these sort of things…or shouldn’t I hold my breath lol ?
Jaynes last blog post..Trivial History June 3
I think Blogger is good in that you can add to or change your CSS and use any sort of design or layout. WordPress.com does not allow for this. With self hosted WordPress you have full control of course.
Thanks Sue! Talk about “just in time” learning, this is it! I have not been satisfied with the way my pictures look in blogger, and this technique will help tremendously. Your instructions are very clear, and I appreciate the advice about the alt tag. I will read more about that.
Sheryl A. McCoys last blog post..Links for 2008-06-07 [del.icio.us]
Thanks Sheryl
Please let me know if there are any other effects that you would like explained as I am considering a follow up post.
This is such a great resource for bloggers. I think every beginner blogger has trouble with images. I have bookmarked this and hope a lot of people find it. I am stumbling it right now. Hopefully that will help.
Thanks Fred, I appreciate that.
Excellent quick tutorial! I just tweeted it.
Enjoy,
Barbara
Barbara Lings last blog post..Define “Blossom” – Day 1 of 7 Days to Making Your Blog Blossom
Wonderful, thanks Barbara – tweets are excellent for promoting posts.
I really like the pictures… they make it very helpful. Thanks for the code!
Hi mum,
Is the cat better yet?
We are expecting rain tomorrow. Can you believe it? I can’t!
Andrea
Rain in Broome – amazing. You will have something more to say when you do your ABC weather report. Just a quick plug for my beautiful clever talented daughter
who is living a long long way away 
The cat is fine now – no more daily two person struggles to get her to take her meds
She is choosing not to go outside recently – it seems it is far too cold for her highness.
Dear Sueblimely, borders to pictures can really be an enhancer. I was just pondering on it yesterday. But, I am not good technically, and I am searching for ways friendly ones so as not to meddle with my blog template HTML. Is there a code like auto-post and pictures get border automatically. Thanks…
Zubli Zainordins last blog post..Friends Close to Heart
Hi Zubli
If you do not want to edit your template at all you could try writing your posts using blog editor software – Windows Live Writer is good and allows you to add borders and other effects to images. http://get.live.com/writer/overview
Awesome! Thanks for this babe, I didn’t even realise that I could do it!
Kelleys last blog post..Dude looks like a lady.
Great tip. I hate when my pictures just look like they are floating in mid air or blend in with the background.
Thank you Sueblimely, I shall check it soon. I hope this is simple, and not so complicated as to re-write the HTML of the template. I shall come back to you soon, when I do see the one you suggest, I can follow simply, while eating egg roll on a plate. Thanks.
Zubli Zainordins last blog post..More Mariuca’s Meme
Great tip. I hate when my pictures just look like they are floating in mid air or blend in with the background.
Adding styling to images can make a blog look more professional – I should do more of it myself
This works a treat for photographer bloggers. I am starting to post more images myself so I guess I will soon implement something similar myself. PS: Thanks for dropping EC on my blog.
seos last blog post..Discovering your next niche
Great to have a comment from an EC visitor and a reminder that I should do so more often myself.
Well, I was sure I had commented this post? At least I did an SU, course I think it is an excellent presentation of a useful tool – thanks for sharing!
Btw: I was actually visiting to wish you a wonderful end to your week and to tell you: ‘The heat is on in Oslo, Norway‘
RennyBAs last blog post..The heat is on in Oslo, Norway
Hi Sue,
I love graphics. The photos are beautiful. Did you take them yourself? Thank you for a detailed tutorial on dding borders to images & the additional link to ‘alt tags’ for images.
Gaidas last blog post..Mushroom Tortellini Bake Recipe
I think these borders makes the images look a whole lot better. And they look mor professional too.
Jasons last blog post..Texas golf packages
Thanks for the tutorial. I have been wondering how that appearance tab works. Next time I use an image I’ll give a border a try. It improves the look so much.
Journeyers last blog post..Homemade Yoghurt
Hi! Your great advise just got used! It gave great depth to the image and topped the whole thing off. Thank you for the other link as well. I have checked it out and it looks pretty good! Take Care
Peter McCartneys last blog post..The Independent Observer
Hi Sue, this is a great tutorial! I stumbled and reviewed it
Bobby Revells last blog post..Explosive Stumbleupon Traffic
Thanks Bobby and thanks for Stumbling andletting me know about it too.
PS – Your Explosive Stumbleupon Traffic post was excellent.
[...] Add Borders to Images – by Sue Blimely: An easy to understand tutorial for adding borders to images including padding and so forth. A very useful post. Sue’s blog is filled with useful articles so be sure to check them out. [...]
[...] for BeginnersAdd Borders to ImagesSpeed Up Your Firefox BrowsingTweetathon Tonight – Pass It OnBlogger Appreciation DayRecovering From [...]
Great Tips! Thank you!
Lailas last blog post..Cartoons of Hate — Prophet of Love
This is one thing that I should really learn, playing with css. I’ve always added the borders manually which is a pain. You don’t know how to add a shadow do you?
Thanks, I will definently be sure to use those tips soon. I like the last one.
thanks for posting in a clear and easy manner, it helped alot
AdventureFoods last blog post..Roti-Mataba: A Great Breakfast Spot
top post and you really explained in detail how to do it… its actually quite a simple process after you explained it…
Wow, thanks for sharing the tips on how to add border on images in different ways. I don’t use border in my blog but maybe I should consider now just by looking at the html codes you have given. Thanks.
Petitehyes last blog post..Michael Vick in UFL: United Football League 2008
Since I’m still learning how to write some html, this is information very helful for me. thanks.
this is cool. :O i have to try this on my blogger blog… been looking for something like this…
koujis last blog post..leaves nature haiku poem
Great tutorial. I really think image borders are a nice touch to a quality theme. It’s one of those tiny details that can separate tinkerers from real designers.
Andrew. Estate Lawyer.s last blog post..Airline Regulations for Carry Ons
It really enhances any content call it pictures or boxes with paragraphs. Worth to keep it handy.
Nice post bro
Webhosting Reviews last blog post..ipower.com – Web Hosting and Domain Name
I think that is the part of CSS that you should learn to do manually. Aligns and floats are important too.
webkinzs last blog post..Webkinz Pins for Webkinz Lovers
Sue, thanks for the handy little tip. I didn’t realize how simple this was.
Minnesota Attorneys last blog post..Minnesota Accident Injury Lawyers
Just want to say thanks for the helpful post!
great post~~~ useful n helpful….
sherenes last blog post..Free JustHost Coupon 2009 – Save 20% Immediately!!
hi~
thank for your sharing…
it’s very useful post…
hehe… keep it on
sherenes last blog post..Free JustHost Coupon 2009 – Save 20% Immediately!!
I would just like to say that I think this is a truly great site. I am in the middle of planning a 6-week exercise programme as part of my GCSE PE coursework, and this site has helped me so much.
Sue, thanks for the handy little tip. I didn’t realize how simple this was
What a Great tutorial. I really think image borders are a nice touch to a quality theme. It’s one of those tiny details that can separate tinkerers from real designers.
For Sale Cheap´s last undefined ..If you register your site for free at
I would just like to say that I think this is a truly great site.
The details about different types of training have been very useful.
I also take part in athletics and this site has given me so many new training ideas. This is a very comprehensive web site which I will definitely be using again.
The only thing I would say is that in certain sections diagrams would be helpful in explaining, and more example exercises to try out would be great. Thank you for a fantastic web site!!!
These are some very handy tips. thanks for posting these. I’ve resigned to just build borders for images with Photoshop, so these steps save some effort.
Excellent work on this Sueblimely. Perhaps I can add that once your image is bordered (new word!), put it up over at picnik.com for some fun effects.
~ Colleen
Kennewick Real Estates last blog post..Are You Validated?
The only thing I would say is that in certain sections diagrams would be helpful in explaining, and more example exercises to try out would be great. Thank you for a fantastic web site
These are some very handy tips. thanks for posting these. I’ve resigned to just build borders for images with Photoshop, so these steps save some effort.
great post, very detailed. i’ve used it very successfully on several of my sites. Now, i have to figure out how to remove borders from images that have links…
dme5430s last blog post..TOEFL Test
sdf saf sf sf
thanks
Oyunlars last blog post..onLine-2
Sue, thanks for the handy little tip. It’s a very useful tutorial for those new to CSS.
I personally think having borders around images is good as it usually adds to the aesthetic appeal of a website. Depending on the site, I make all my images have borders (some sites I don’t for various reasons though). This is a very helpful post with some good examples. Thanks for the code snippets, they help a lot.
Funny Stuffs last blog post..God’s Leftover Gifts
Hehe . It was so simple. I cannot believe it.
Thanks for sharing and explaining those quick steps. I really needed this, cause I need to modify some images on my website.
Really useful if you need a border.
dropshippings last blog post..Dropshipping über eBay
Awesome this is what I need for my WP theme project!
Kampanye Damai Pemilu Indonesia 2009s last blog post..Pemilu 2009 – 2 hari lagi
Nice border, i prefer use green color since i love green.
Thanks a lot! very useful may God bless you with more knowledge to share
good. Learn something from these two articles.
rickys last blog post..FireFTP, free full feature FTP client
Thanks Sue,
I have bookmarked this page. I had been using Photoshop to accomplish what can easily be done with CSS. Now I know better and can save much time in the future. I will play around with padding and margins to see the effects of this technique.
- Brian
Thanks Sue. I haveta have borders on all my pics. I especially like a border with a drop shadow behind the image. ~ Colleen
Kennewick Real Estates last blog post..Search Kennewick Homes for Sale
Thanks a lot. I was looking for this code and your tutorial is nice.
thanks for this tutorial i was looking for this tutorial.. thanks alot!
Yes! Wow what a great tutorial. I just bookmarked this site. Although I have a bunch of wp sites my technical skills are lacking. This will help a billion.
Awesome! may i digg this…??
rohadis last blog post..Belajar Menaikkan Kembali Trafik Tukang Nggame
very nice css, thanks for shared..
lissas last blog post..vitamin D benefits
I think it is a really good idea to add borders to images, you did an awesome job explaining all the different possible solutions to adding borders to images
I love css by the way =D
Till then,
Jean
this’s a great tutorial..thx
Wisata SEO Sadaus last blog post..Belajar SEO kepada Google
Nice article. I have bookmarked this page.
Thanks.
wisata seo sadau
Wisata Seo Sadau
wisata seo sadau
very cool css, thanks
roberts last blog post..Find the geographical location of a host by ip address
thank you very much for all the information. It really helped me a lot.
From,
digital photo frame
I like the CSS modifications allowing for a padded colored border. Nice! – Colleen
Kennewick Real Estates last blog post..Kennewick WA Homes for Sale
Great tutorial that I can use for my website. I love the detail, thanks for the hard work.
very useful. i’ll bookmark this page for my future neede. thank alot
wisata seo sadaus last blog post..balapan wisata seo sadau
Very designing tips. I would like to call it designing tips. Because previously I didn’t use this code. I use image with border. Know if I use this code with css this will defiantly save my lot of time and also upload website faster than previously.
I’ve seen some cute animated gifs with it, and I’m wondering how do I add that to my photos. What programs can I use?
testing 35253452542342 test test
Thank you very much. This article is so helpful.
Fengshui Consultants last blog post..Bad Examples Of The Outside Of A Building
very very very useful tips , it’s true that adding borders, gives the image a better look , i was looking for that since a long time
stranger´s last blog ..Let’s Know About : Ferrari California
The pop up comment windows are a nuisance aren’t they. I always use Firefox so cannot remember if the same problem occurs in IE.
Thank you! So simple and yet so useful…
Forbidden Cities´s last blog ..+ Photos: My Latest Abstract Painting
This is a great post.Its very helpful ,I’ll defiantly use it in future.Thanks for sharing
I use Photoshop for image creation but the newer online editors are impressive and provide most of the editing functions I would require: they are much easier to use too.
mechanical engineering degree AND PhD computer science AND Nursing degree
I have been researching current online image editing applications which will allow you to do this and much more. Because of my web design activities
computer degree AND PhD history
nice tutorial..simple technique
fish´s last blog ..Supplement Side Effects
I recently started to add borders to some of my images, do you think that makes that look good, or should I take the borders off ?
Creative Web Design´s last blog ..Free and User friendly web page design
Although I still confuse on how to implement your tips, but I really thank for this.
Great tip, it makes the pictures look so much more professional
Its amazing what such a simple thing can do to an image.
-Jack
Great – simple but effective code to make your WP images look just that much better.
Buy PSP Go´s last blog ..Gran Turismo Free With PSP Go Pre Order!
Add borders to images looks good. Thanks for code for inline styling.
I want to add shadow effect to my site. does anyone know how?
This questions is hard to find an answer for, I have always wanted to add borders to my images, now I know how, thanks!
Practise TOEFL Online with variety of TOEFL preparation materials – Free TOEFL Sample Test, Full TOEFL Tests, Mini Tests, Tips and Strategies for all TOEFL Sections – Reading, Listening, Speaking, Writing; and more TOEFL materials to help students better prepare for the TOEFL Exam.
harie
Practise TOEFL Online
Thanks a lot..
this article very useful 4 me..
ulfa´s last blog ..Kenali dan Kunjungi Objek Wisata di Pandeglang
Me too, pretty cool idea on how to add a border with html. Thanks.
Filipina Heart´s last blog ..Remembering Michael Jackson – Inmates Perform Thriller
nice tutorial ^^, good job !
good tutorial tq !
thank you for posting this Sue I have been trawling the internet for simple coding to chnage my blogger borders.
backpacking round europe
I want to add shadow effect to my site. does anyone know how?
I think you can do that in Photoshop, hope that helps!
Cute Graphics´s last blog ..Cute Cat
Wow what a great tutorial. I just bookmarked this site. Although I have a bunch of wp sites my technical skills are lacking. This will help a billion.
Really cool tutorial I love it, thanks Sue!
Cute Graphics´s last blog ..Cute Cat
Add border to image looks perfect and completed. Thanks for share good resource.
I think Blogger is good in that you can add to or change your CSS and use any sort of design or layout. WordPress.com does not allow for this. With self hosted WordPress you have full control of course.
great post, a lot of people don’t know enough html to do this sort of thing but worpress makes it pretty easy.
This is very helpful, and can aid in making a great looking site.
wow thanks for that great post
I think use some image tools to do that is a good ideas, such as batch photo factory.
coool post, i used your code in my blog it’s realy great code.
thank you
empire technology´s last blog ..How to Find Fresh Dofollow Blogs
I have just loved these designing tips as provided for the image border as they can enhance purpose and reason for those images.
This is my first time visiting your post…I always have to work at my creative side…and you have given me some insperation to day…I did not think of doing this…we get so set in our ways that we need people like you coming up with new design…Thanks…to you
Thank you for the tutorial. This is something new and interesting that I’ve never known before. I’ll try applying this method. Thanks again:-)
nice blog,I can learn a lot from you.I hope your blog will have a huge Earnings.
gavinzhu2010´s last blog ..Long Beach Golf Courses Offer Challenges For All Skill Levels
wow, perfect articles. i will refer it to my friends.
i like this image
kumpulan informasi´s last blog ..Miyabi Maria Ozawa Artis Bokep Idaman Kamu
very useful thanks for thats ! laptop
god bless you too neccessary informations hosting web hosting
Thank you for nice informations they are too neccessary for me !
good!
haber´s last blog ..S?rlar Benimle Mezara Gidecek
Very useful informations but it will be too good. I Think that they are useful for people with sharing opinions. I bookmarked. nlp e?itimi ya?am koçu
hi friends
thanks for posting in a clear and easy manner
good info
bye
definitely worth a read! i’l think of adding borders to all my future images.
golf tutorial´s last blog ..Hello world!
Thanks Fred, I appreciate that.
great tutorial, I like it to customize my picture
Free Music News´s last blog ..Linkin Park Wallpaper #10 | Reanimation Wallpaper
Thanks, great post
Nice post about borders to images. I like your blog very much because it has very interesting articles of different topics like testking 70-564, testking 642-825 and testking 642-504 and their tips and tricks. I am a very big googler and search on different topics. Between searching i found your nice blog. Thanks for your this great blog.
Very Informative Sue:
I am new to working with wordpress, and this will help me out alot thanks again for the guidance
All the Best
Rob
Rob @ Digital Drawing pad´s last blog ..Getting Links To Your Site
thanks for your tips
kumpulan informasi´s last blog ..Cewek Sexy penampilan hampir telanjang dan bugil bulat
thank you for posting this Sue I have been trawling the internet for simple coding to chnage my blogger borders.
I discovered Piknik last night but I really wanted simple borders.
Its quite cool and impressive thing. It helps lot to change look of images and gives extra impressive look to images.
thanks I think use some image tools to do that is a good ideas, such as batch photo factory.sehir ici nakliyat