Whether you are a Bloger or building a online store controlling how your images are displayed for your visitors is a good way to highlight and add interest.

When you apply CSS styles to images you want to do so in a way that limits which <img> tag gets that extra special feature. In our HowTo we will build a container <div> to hold our content area

The div will be given a special class that way anything inside it can be controlled based on this parent <div> class name. In your blog theme or HTML template you may have a content area div that contains the main page content. Most designers will follow a standard naming system of <div class=”content”> but you should examine your source to make sure.

Once you have a parent div you can apply styles to everything within it using the following format.

And the resulting Image would look like this with a dark gray border around the image.

Drop Shadow With CSS

Now we can do something a little more special then that with just plain CSS and no outside images by changing the color of the border on each side of the image to give a drop shadow type of effect.

And the resulting Image would look like this with a dark gray border around the image.

that is pretty good but we can do better

Image Border With CSS and an Image

If you want to add an image to the border of your Image (kinda confusing but) you can by adding another div container and changing the CSS a bit.

First make a new div around your image and give it the ID of photo  <div id=”photo”>

Then Apply an image to the photo div as a background.

Then give a margin around the img tag of 15px to allow open space for the background to show through.

In this example you will see it doesn’t quite work right but we will fix it next time.

And the resulting Image would look like this with a animated star border around the image.

Controlling each side – Image Border With CSS and an Image

As you saw in the previous example using that image as a background did not quite work because the pattern repeats at a different rate then the divisible size of the image that is inside it.

In some instances using a single image as a background will work for you especially if you were using a tile pattern that is made to duplicate seamlessly. But as for animated images such as our star we will have to do a little more work.

In this example we will apply the CSS inline and use 5 different divs to complete the task.

The main div will have its background applied in the x direction only repeat-x.

The other divs could use this method but because their repeat patterns hidden from view we did not apply repeat-x or -y to the backgrounds.

Using divs inline in this example is more complex and time consuming since you must tweek the heights and widths to match each image.  There are better methods but it is good to learn how to do it this way too.

The divs have different colors to let you see where they are located around the image. The transparant border of the star.gif animation allows this color to show through.

As you will see the animated gif does work better in this example but it is still not perfect and this is the reason you will probably not see too many animated gifs applied as borders on containers.

Another method may be to just make one larger gif with the primary image and the surounding animation. This would not require CSS and only the dropping in of the full image with the border applied in your image processing program.

However its not about the images its about the methods.

And the resulting Image would look like this with a animated star border around the image.

NOTE FOR IE Users It looks like this image

For firefox users you should be able to see the real thing.

.
.
.

Note On Image Borders

As you can see simple application of CSS within your documents provides cross browser compatibility. The farther you push the edge or border in this case the higher the probability that your code will not be seen the same way by everyone.

In other HowTos we will look at work arounds for many general tasks but when in doubt keep it simple.

You are also likely to run into problems if you are a bloger or use CMS software. Most editors within these online website applications do not like people inserting css divs tables and they will wipe out good code in preference of their clean conversion.
In this case you will need to find your own work around or use a different method.

Many image processors will provide thumbnails with special borders for insertion into your webpages some blogs may have plugins that do this or you may want to look to a hosting site like TinyPic.com that allows users to upload and modify images online.

Inline Vs Style Sheet CSS
Editing your css inline instead of within your style sheet to add containers that display a div border can be somewhat complex. In the code above you need to set the heights, widths of divs based on the size of the image you are inserting.

Place holder images of transparent gifs 1x1px in height are used to expand empty divs to the width that you set in your css. Without a place holder gif the div will collapse in many browsers.

Instead of using divs for this task you may just want to use a table and apply your backgrounds to surrounding table cells. This is an easy method to get borders of different types on all edges of your photo.

Remember that the examples shown here are only a beginning to show you some of the available settings you can use in your application of CSS on your containers.

You should experiment and view other methods until you find one that meets your needs.