How To Add A Border To An Image
Tags: border, how, image, to add, Tutorial
This tutorial will show you the simple way to add a border to an images. I’ll show two methods that you can use. Your image will look like after you add a border.
Image without border

Image with border

Method 1
In this method, I’ll show you how to add border using The GNU Image Manipulation Program, GIMP. GIMP is a free software. You can download HERE.
Step 1
Click on Select menu and click All.

Step 2
Then, click on Select menu again and click Border

Step 3
A new window will open. Choose your pixel. I usually use two. Click Ok

Step 4
Now, Click on Edit menu and and hit on Fill with FG Color. You already finish =)

Method 2
This is the most simple method. No software needed.
Use the following code :
<img src=”Your_Image_Adress” style=”border:2px solid #000000″>
Example:
My image location is “blinkky.com/images/logo_without_border.gif”
The code that I’ll use look like below :
<img src=”http://www.blinkky.com/images/logo_without_border.gif“style=”border:2px solid #000000″>
Now, My image will look like below:

You can change the border to any size you want. That’s it. All done =)

32 Responses to “How To Add A Border To An Image”
By mohdisa on Jun 23, 2009 | Reply
this is great, i will try this. thanks blink
[Reply]
By Simon | Teenius on Jun 23, 2009 | Reply
Nice little tutorial!
Personally I just use fireworks and physically draw lines around the edge. It takes too much time though and is really annoying if you have to do loads
I wonder if there’s any websites that automatically adds borders to images :S
[Reply]
By willie on Jun 23, 2009 | Reply
good info and tutorial.
[Reply]
By Jenna on Jun 23, 2009 | Reply
Pretty good post. I just came by your site and wanted to say
that I have really liked reading your blog posts. Any way
I’ll be subscribing to your feed and I hope you write again soon!
[Reply]
By Fatin Pauzi on Jun 24, 2009 | Reply
Thanks, Blinkky. I’m very noob in graphic. You help me a lot.
[Reply]
By George Serradinho on Jun 24, 2009 | Reply
I have always added the border via html code, but it seems that GIMP does it very easily. I think I will try this.
Thanks for sharing
[Reply]
By Bradley Nordsrom on Jun 24, 2009 | Reply
Thanks for the advice.Now I’m going to put some borders around some pictures that I like to make the pics look better.Thanks again
[Reply]
By BloggerDaily on Jun 24, 2009 | Reply
I used GIMP a long time ago but it’s a cool photo editor!
Sometimes the border script is in the CSS styles file so you have to check it out.
[Reply]
By Atul on Jun 25, 2009 | Reply
I think we can add borders thru HTML easily but thanks for this
[Reply]
By Buat Duit Online on Jun 25, 2009 | Reply
Nice little tutorial. I prefer to do it using the HTML method. Otherwise I prefer to use Photoshop.
[Reply]
By YingHang on Jun 25, 2009 | Reply
Woah…will try it out on my Photoshop CS2
[Reply]
By Azah on Jun 25, 2009 | Reply
never use GIMP before..
which one is better? photoshop or GIMP?
ur personal suggestion?
[Reply]
By mohdisa on Jun 25, 2009 | Reply
this is open source right?
[Reply]
By admin on Jun 25, 2009 | Reply
@ mohdisa,
Do you mean GIMP? Yes, it is open source.
[Reply]
By admin on Jun 25, 2009 | Reply
@ Azah,
I’m still a newbie with GIMP but I really love to use it. Personally I like to use Photoshop. Maybe because I’ve been using Photoshop for a long time. Try GIMP, maybe you’ll like it =)
[Reply]
By alone on Jun 25, 2009 | Reply
I used GIMP for a while before changed to Photoshop. Btw, I always prepare it in my portable hard disk for emergency case.
[Reply]
By Jacob Yap on Jun 25, 2009 | Reply
Thanks for the tips. Never knowing that this is such easy =(
[Reply]
By How I Make $5000 a Month Posting Links on Google on Jun 25, 2009 | Reply
Loved your latest post, by the way.
[Reply]
By Adila on Jun 26, 2009 | Reply
i can never get familiar with gimp haha -it feels hard lol
i’ll stick to photoshop xD
[Reply]
By Marlene on Jun 26, 2009 | Reply
I always like having borders in images. I think it looks more pro when one can place a border around an image. GIMP is a good program to start with, and it’s free, too.
[Reply]
By Michael on Jun 26, 2009 | Reply
Hey, have you seen this news article?
New details about Michael Jackson’s Death Emerge
I was wondering if you were going to blog about this…
[Reply]
By admin on Jun 26, 2009 | Reply
@ Michael,
Yes Michael, I’ve heard about that. Maybe I’ll not blog about that. Looks like you’re a big fan of Michael Jackson =)
[Reply]
By haritz on Jun 26, 2009 | Reply
berguna ni
[Reply]
By iYdaJuhar on Jun 27, 2009 | Reply
i shud try. tenkiu.
[Reply]
By blowie on Jun 27, 2009 | Reply
apasal tak letak guide utk letak border guna code html skali? sekadar cadangan aje,hehe
[Reply]
By admin on Jun 27, 2009 | Reply
@ Blowie,
Bagus jugak cadangan tu. Maybe next time I’ll post something about it =)
[Reply]
By The Bad Blogger on Jun 27, 2009 | Reply
Woo… thanks man… now I can post pictures with nice outline…
[Reply]
By Ruchi on Jul 4, 2009 | Reply
Nice tip, now the image is looking quite good with border.
[Reply]
By S.Pradeep Kumar on Jul 4, 2009 | Reply
Short ‘n’ Sweet tutorial !
[Reply]
By Melayu Boleh on Jul 12, 2009 | Reply
hoho..thats good tutorial. I will try.
[Reply]
By Contest Hunter on Jul 16, 2009 | Reply
Nice tips..thanks for sharing !
[Reply]
By custom-web-design on May 24, 2010 | Reply
wowwwwwwwww….this is cool….if u have photoshop….just give and outer gradient shadw and it ll be more perfect
[Reply]