CSS: A better way to set border images?

programming web dev
1

I’ve got a block in my page design that I’ve setup border images for, but I don’t like how bulky the markup looks, so I’m wondering if there’s a better way. Here’s sort of what I’m doing:

<div id="box">[INDENT]<span id="box-top"></span>[/INDENT]
    <span id="box-left"></span>
    <span id="box-right"></span>
    <span id="box-bottom"></span>
    <span id="box-content">Hiya.</span>
</div>

…then in the CSS I’ve got all the spans positioned absolutely with the associated background-images and so forth, as you’d expect. It works but it just sort of smells like I’m hacking something together. It reminds me a lot of the way I used to carve out tables with all these little broken-up images in the cells in order to get a nice graphical border around a text area.

Maybe this is just what you have to do if this effect is what you want, but I thought I’d ask, is there a better way?

Thanks.