# CSS: A better way to set border images?

**URL:** <https://forum.kirupa.com/t/css-a-better-way-to-set-border-images/329432>\
**Category:** web dev\
**Created:** [August 28, 2012, 1:06pm UTC](https://forum.kirupa.com/t/css-a-better-way-to-set-border-images/329432 "2012-08-28T13:06:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![shade\_v2](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@shade\_v2](https://forum.kirupa.com/u/shade_v2)\
**Post date:** [August 28, 2012, 1:06pm UTC](https://forum.kirupa.com/t/css-a-better-way-to-set-border-images/329432/1 "2012-08-28T13:06:45Z")

</div>

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:

```auto
<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.