Border around Image

Question

I want to put border around regular size image using php. I m wondering that i found border for text to image but not for simple images. The border width may be changeable. Please help

Answer 1

The img element has by default a border attribute http://www.w3schools.com/tags/tag_IMG.asp Not a php expert but I would also opt for having a dynamic var inside of the tag itself so that it is fully flexible

Answer 2

I would not manipulate the images using GD or imagemagick but instead put a [css border][1] on the image or a div behind the image that's slighly bigger than the image.

Either you put a border on every picture using css :

img { border: 2px solid #000; }

Or you can define some border classes likes this :

.border1 {border: 1px solid #000}
.border2 {border: 2px solid #000}
.border3 {border: 3px solid #000}

and then use on your images :

<img src="..." class="border1"></img>

or

<img src="..." class="border3 "></img>

edit : if you were using scss/sass you could even do something like :

@for $i from 1 through 10 {
   img.border_#{$i} { border: #{$i}px solid #000; }
}

Sass rocks !

About the colors :

.bMainColor{border-color:#ff0000;}
.bSecColor{border-color:#00ff00;}
.bThirdColor{border-color:#0000ff;}

and on the img tag :

<img src="..." class="border1 bMainColor"></img>

I guess there are so many ways to use css :)

References about borders :

http://www.w3.org/TR/CSS2/box.html#border-properties

http://reference.sitepoint.com/css/bordersoutlines

http://www.w3schools.com/css/css_border.asp

Answer 3

Use ImageMagick in php , it has direct command to add border to images, see

http://www.imagemagick.org/Usage/crop/#border

Answer 4

if you want it to be changeable, make a textbox, where you enter the pixel size of the border and then a submit button.. Use post or get, what ever you like..

BUT, this WILL only be working aslong as your not changing page, unless you make this dynamic somehow..

<img src="..." style="border:<? $_POST['pixel']; ?>" />

otherwise, use @dwarfy's solution..