An HTML img tag is used to insert an image on a webpage.  For example the following image is added to this page using the following code.  This is a very basic insert with no tricks like borders or shadows.

<img src=”http://www.yoursite.com/images/nameofimage.jpg” alt=”html img tag” />

yoursite = your own domain name and nameofimage = the file name of your own image.

Make sure you change those and also make sure your path to the image is correct. Set the src in HTML img tag to the path where your image is uploaded on your website.



Now lets add a border to the HTML img tag and display it with some space between the border and the image.  This is where we add a bit of CSS code to do the trick.  It’s simple and easy and works in all browsers.

The CSS code

.image-border {

border: 1px solid #000000;

padding: 5px;

}

The HTML Code

<img class=”image-border” src=”http://www.yoursite.com/images/yourimagename.jpg” alt=”your image describtion” />

Here’s the same thing as above but with no space between the border and the image. All you need to do is take out the line that says padding: 5px; in the above CSS code.

Now lets do something really nice and add a background or drop shadow effect. This method is pretty simple and only CSS code to get the job done. I haven’t tested this in all browsers but it works in most of them. So With a little bit of modification we can add any color shadow effect.

.image-shadow {

border: 1px solid #000000;

padding: 0px;

position: relative;

bottom: 5px;

right: 5px;

}

.shadow {

width: 303px;

height: 227px;

background-color: #3f3b3b;

color: inherit;

margin-left: 4px;

margin-top: 4px;

}

The HTML Code

<div class=”shadow”>

<img class=”image-shadow” src=”http://www.createbetterwebsites.com/images/html-img-tag-mrolajolla.jpg” alt=”html img tag” width=”300″ />

</div>

Now with the shadow effect above make sure you adjust the height and width of the .shadow in the CSS code to be just a little more than your image height and width. Play with the numbers to get it to look right. I’ve added about 5 pixels to the width and height in the example above.

So those are just a few CSS tricks you can apply to your own HTML img tags that don’t require much other than CSS.