How to make a DIV with image borders

Is it possible to make a DIV that, regardless of dimensions, always has a "border" around it consisting of images?

Like say I want to make a DIV appear framed, and have 4 images:

- top frame
- bottom frame
- left frame
- right frame

Is there a way to make each one act as a background image, and float to its appropriate corner? Or some other solution to this problem?

The images will be of a nature where the length of the sides of the given DIV won't matter, so no worries there.

 

This is completely possible. Using CSS, simply set the background-url: to each image. If you send the images I can probably take care of it for you.

D

 

Just set the border for the wrapped DIV element .
I suggest the following css code, try it.

border {
1px solid #999;
}

 

In CSS 3 you'll be able to do this right in your style sheet. At the moment, this functionality is only available in Safari and Firefox (and maybe Chrome, since it uses the same rendering engine as Safari).

For example:

border-image: url(border.png) 27 27 27 27 stretch stretch;

Code (markup):

 

why use images and waste bandwidth? Justin makes a valid case for using borders.