How To Add A Border To An Image

Tags: , , , ,

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 without border

Image with 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.

how to add a border to an images

Step 2

Then, click on Select menu again and click Border

how to add a border to an images

Step 3

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

how to add a border to an images

Step 4

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

how to add a border to an images

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.gifstyle=”border:2px solid  #000000″>


Now, My image will look like below:
logo without border How To Add A Border To An Image

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

Related Posts

 
  1. 31 Responses to “How To Add A Border To An Image”

  2. By mohdisa on Jun 23, 2009 | Reply

    this is great, i will try this. thanks blink

    [Reply]

  3. By Simon | Teenius on Jun 23, 2009 | Reply

    Nice little tutorial! :D

    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 :P

    I wonder if there’s any websites that automatically adds borders to images :S

    [Reply]

  4. By willie on Jun 23, 2009 | Reply

    good info and tutorial.

    [Reply]

  5. 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]

  6. By Fatin Pauzi on Jun 24, 2009 | Reply

    Thanks, Blinkky. I’m very noob in graphic. You help me a lot. :P

    [Reply]

  7. 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]

  8. 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]

  9. 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]

  10. By Atul on Jun 25, 2009 | Reply

    I think we can add borders thru HTML easily but thanks for this

    [Reply]

  11. 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]

  12. By YingHang on Jun 25, 2009 | Reply

    Woah…will try it out on my Photoshop CS2

    [Reply]

  13. By Azah on Jun 25, 2009 | Reply

    never use GIMP before..
    which one is better? photoshop or GIMP?
    ur personal suggestion?

    [Reply]

  14. By mohdisa on Jun 25, 2009 | Reply

    this is open source right?

    [Reply]

  15. By admin on Jun 25, 2009 | Reply

    @ mohdisa,
    Do you mean GIMP? Yes, it is open source.

    [Reply]

  16. 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]

  17. 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]

  18. By Jacob Yap on Jun 25, 2009 | Reply

    Thanks for the tips. Never knowing that this is such easy =(

    [Reply]

  19. By How I Make $5000 a Month Posting Links on Google on Jun 25, 2009 | Reply

    Loved your latest post, by the way.

    [Reply]

  20. 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]

  21. 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]

  22. 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]

  23. 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]

  24. By haritz on Jun 26, 2009 | Reply

    berguna ni

    [Reply]

  25. By iYdaJuhar on Jun 27, 2009 | Reply

    i shud try. tenkiu. :)

    [Reply]

  26. By blowie on Jun 27, 2009 | Reply

    apasal tak letak guide utk letak border guna code html skali? sekadar cadangan aje,hehe

    [Reply]

  27. By admin on Jun 27, 2009 | Reply

    @ Blowie,
    Bagus jugak cadangan tu. Maybe next time I’ll post something about it =)

    [Reply]

  28. By The Bad Blogger on Jun 27, 2009 | Reply

    Woo… thanks man… now I can post pictures with nice outline…

    [Reply]

  29. By Ruchi on Jul 4, 2009 | Reply

    Nice tip, now the image is looking quite good with border.

    [Reply]

  30. By S.Pradeep Kumar on Jul 4, 2009 | Reply

    Short ‘n’ Sweet tutorial ! ;)

    [Reply]

  31. By Melayu Boleh on Jul 12, 2009 | Reply

    hoho..thats good tutorial. I will try.

    [Reply]

  32. By Contest Hunter on Jul 16, 2009 | Reply

    Nice tips..thanks for sharing !

    [Reply]

Post a Comment