Give arbitrary block element arbitrary image borders

[heisters]

I've written a PHP function that will take a block element and insert XHTML to give it image borders (eg. so that I can have a dropshadow or a scalloped border). I've been able to get the top and bottom borders, but haven't been able to figure out the left and right.

This is what happens now:

This is inserted just inside the target block's opening tag:

<div class="rounded-top $style">
<img class="left" src="{$prefix}top_left.png" />
<img class="right" src="{$prefix}top_right.png" />
</div>
<div class="rounded-sides $style">
<img class="left" src="{$prefix}left.png" />
<img class="right" src="{$prefix}right.png" />
</div>

This is inserted just inside the target block's closing tag:

<div class="rounded-bottom $style">
<img class="left" src="{$prefix}bottom_left.png" />
<img class="right" src="{$prefix}bottom_right.png" />
</div>

So if you called it on "<div class="target">Foo</div>" you would end up with something like

<div class="target">
<div class="rounded-top $style">
<img class="left" src="{$prefix}top_left.png" />
<img class="right" src="{$prefix}top_right.png" />
</div>
<div class="rounded-sides $style">
<img class="left" src="{$prefix}left.png" />
<img class="right" src="{$prefix}right.png" />
</div>
Foo
<div class="rounded-bottom $style">
<img class="left" src="{$prefix}bottom_left.png" />
<img class="right" src="{$prefix}bottom_right.png" />
</div>
</div>

That's all styled with this:

.rounded-top.orange_shadow {
background: transparent url(/images/orange_shadow/top.png) repeat-x 0 0;
height: 5px;
}
.rounded-top.orange_shadow .left, .rounded-bottom.orange_shadow .left {
float:left;
}
.rounded-top.orange_shadow .right, .rounded-bottom.orange_shadow .right {
float:right;
}
.rounded-bottom.orange_shadow {
background: transparent url(/images/orange_shadow/bottom.png) repeat-x bottom center;
height: 5px;
padding-bottom: 3px;
}

.rounded-sides.orange_shadow * {
height: 100%;
}
.rounded-sides.orange_shadow .left {
float: left;
width: 1px;
}
.rounded-sides.orange_shadow .right {
float: right;
width: 2px;
margin-right: -7px;
}

The rounded-sides don't work, obviously, because a floated element won't inherit height from its parent.

I'd like to keep something like the current markup, in that nothing is wrapped and the DOM hierarchy isn't modified.

So any ideas on how to get the rounded-sides to match the parent's height?

Thanks!

[heisters]

well, here's a possible solution, but it doesn't maintain the DOM hierarchy:

<div class="rounded-left $style">
<div class="rounded-right $style">
<!-- content -->
</div>
</div>

then in the styling:

.rounded-left.orange_shadow {
background: transparent url(/images/orange_shadow/left.png) repeat-y 0 0;
}

.rounded-right.orange_shadow {
background: transparent url(/images/orange_shadow/right.png) repeat-y top right;
}

Anyone have a suggestion that wouldn't alter the DOM hierarchy?