How To Add Image-border Around An Image?

Is there any simple way to add a image border around an image? Reason is I want to create a drop-shadow effect around the image. The images are loaded as thumbnails and are 110x75

Solution 1:

function addBorderpng($add){
    $border=5; 
    $im=imagecreatefrompng($add);
    $width=imagesx($im);
    $height=imagesy($im);       
    $img_adj_width=$width+(2*$border);
    $img_adj_height=$height+(2*$border);
    $newimage=imagecreatetruecolor($img_adj_width,$img_adj_height);     

    $border_color = imagecolorallocate($newimage, 255, 255, 255);
    imagefilledrectangle($newimage,0,0,$img_adj_width, $img_adj_height,$border_color);

    imagecopyresized($newimage,$im,$border,$border,0,0,
    $width,$height,$width,$height); 
    imagepng($newimage,$add,9);  
    chmod("$add",0666);

}

Solution 2:

You can use the GD library or ImageMagick to alter the actual image in PHP, but you can also achieve a similar effect in CSS, if it is only required on a web page.

There is a complete tutorial on doing it with PHP and GD here:

• Adding Drop Shadows with PHP

Solution 3:

add Border around an Image by php GD

<?php$img_src = '3.jpg';

$img = imagecreatefromjpeg($img_src);
$color = imagecolorallocate($img, 132, 15, 153);
$borderThickness = 10;

drawBorder($img, $color, $borderThickness);


    functiondrawBorder(&$img, &$color, $thickness)
    {
        $x1 = 0;
        $y1 = 0;
        $x2 = imagesx($img) - 1;
        $y2 = imagesy($img) - 1;

        for($i = 0; $i < $thickness; $i++)
        {

            imagerectangle($img, $x1++, $y1++, $x2--, $y2--, $color);
        }

    }

header('Content-type: image/jpeg');
imagejpeg($img);
?>

and Add Borer to an Image using CSS

.border
{
    width: 100px;
    height: 75px;
    border : 3px solid rgb(132, 15, 153);
}
<img src='3.jpg'class='border'>

Solution 4:

You would need to use CSS to create this effect. There are several options.

.img{
      border-top:none;
      border-left:none;
      border-right:solid 2px#dddddd;
      border-bottom:solid 2px#dddddd;
 }

is the simplest but it does not look so great.

To make even better shadows you can use a plugin for jQuery such as the shadows plugin. It creates nice drop shadow effects on any element on the page.

Solution 5:

If this is just visual sprinkles you could try the CSS3 box-shadow property. It will only work on Firefox, Safari and Chrome though, so it's a only a "progressive enhancement". This tutorial should help.

Alternatively you can use this CSS for a basic effect. gallery is whatever class name you give to the element surrounding the images (i.e. via <div class="gallery">...</div>). Width/height are optional, but if the images are all the same size then it's better to use CSS instead of the width/height attributes on the images themselves.

.galleryimg {
    width: 100px;
    height: 75px;
    border-width: 03px3px0;
    border-style: solid;
    border-color: #ccc;
}