Question

The problem is that the dimensions of the div box and its location will be changing dynamically via JavaScript, and the box itself must be 100% transparent.

Look at the picture to figure out what I mean. As far as I know, there is nothing that can be done via pure CSS, am I right?

Maybe you know some tricks that could help me out (except for that when it’s done with four boxes on the perimeter nor when it’s done with nested boxes)?

http://savepic.org/85113.png

Answer 1

Yeah, short of the advanced multiple background image stuff and/or border images in CSS 3, you’d need some nested divs.

Maybe something like this:

<style type="text/css">
.box-1-top,
.box-1-bottom{height: 5px; font-size: 0;/* Make height work in IE */ background: url(box-1-background.gif) left top repeat-x;}

.box-1-left{padding-left: 5px; background: url(box-1-background.gif) left top repeat-y;}
.box-1-right{padding-right: 5px; background: url(box-1-background.gif) right top repeat-y;}
</style>

<div class="box-1">
    <div class="box-1-top"></div>
    <div class="box-1-left">
        <div class="box-1-right">
            Box content here
        </div>
    </div>
    <div class="box-1-bottom"></div>
</div>