CSS image borders

using images as borders

[hadiz]

Hello,

Is it possible to have borders around a <div> or <span> that are images? I don't mean something like this:

img {
border: 1px solid #000;
}

I'm talking about using an image as the actual border, via CSS or any other means. I know it could be done by setting a background, but I need something that can scale on the X and Y-Axis.

I'd appreciate any help.

[ebby]

One trick I use for this is something like this:

<div id="content">
<div id="content_top"></div>
<div id="content_main"></div>
<div id="content_bottom"></div>
</div>

Then CSS:

#content_top{
background-image:url(img src);
background-repeat: whatever you need here;
height: height of the bgimage;
}

#content_main{
background-image:url(img src);
background-repeat: repeat-y;
}

#content_bottom{
background-image:url(img src);
background-repeat: whatever you need here;
height: height of the bgimage;
}

Now you have to cut up your image perfectly in photoshop so that everything lines up right. For the main content image, since that will most likey be something that needs to expand as content changes, make the image 1px in height, it looks smoother on the repeat.

Hope this helps!

[londrum]

if you just want the image to be the border, and not fill up the centre, then you could do it with just one div i reckon. you'd have to make the image as big as the whole box first of all, and the give whatever is inside the box a background color (so it blots out the center of the image). if you give the div a few pixels of padding, then it will seem like the underlying image is acting as the border.

[ebby]

The problem hadiz is having is with scaling from what I gathered. Your solution could work but it would be a fixed size.

[hadiz]

ebby: You are correct. Scaling vertically and horizontally is crucial.

[swa66]

CSS 3 has image borders in the spec and safari already implements it AFAIK.

For the rest, well ... Graceful degradation seems to be the way to go if you wan tto avoid adding a lot of html

[w3.org...]

[Xapti]

Well there is an easy way to get a tiled image border, if that's what you want... just a "ugly" square border which has a tiled image in it. Consists of putting a div with a margin (and another background image or background color) inside a div with a backround image.

If you want a special corners on images though for instance, we're talking getting an effect called "rounded corners" or "custom borders". Usually it involves nesting about 3-4 divs to get a pretty good cross-browser supported variable size box.