I need a custom border for a div box. What are the ways to apply this?

Question

The problem is that the dimensions of the div box and its location will be changing dinamically 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)?

Picture: http://savepic.org/85113.png

Answer 1

In CSS3 you can do this by applying

Border Images

Before applying this look at

Browser support for CSS3 properties

Answer 2

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>