How to Add a Border Around an Image with CSS

Sometimes, when building a web page, you want the image to look like it has a border like a photograph when you get film developed. The following will show you how to add a border around images using CSS:

Image Border with White Background

Add to your CSS file or the head tag:

.imgborder
    { background:#ffffff;
    padding:12px;
    border:1px solid #999999; }

Add this class (imgborder) to your image tag in the html file:

<img src="images/IMAGENAME.jpg" width="200" height="256" border="0" alt="" class="imgborder">

Image Border with Transparent Background

The padding around this border is a bit thinner than the one above but you can make it wider by changing the padding.

Add to your CSS file or the head tag:

.img-border {
    background:transparent;
    padding:8px;
    border:1px solid #4D1C19; }

Add this class (img-border) to your image tag in html file:

<img src="images-tips/pinkrose.jpg" width="200" height="256" border="0" alt="" class="img-border">