Different Images for top and bottom of DIV's border - html

Question

I have a site that I'm working on, and one of the requirements is that it cannot use any client side scripting (jQuery/JavaScript). And since I'm not that great with CSS, I'm a little stuck here.
I have a simple div, which should have a "border image". But I can't use the CSS border-image since it doesn't work with IE (already tested), and I can't get two different images for top and bottom to work with background-image: - so now I'm left wondering what I can do...
Below is what it should look like, both the arrow-looking things are 2 png files:
Is there any way to accomplish this? By using just 1 div, and 2 images? Without JavaScript, and also maintaining cross-browser compatibility (with some exceptions, like ie6<)?

Answer 1

This works in: IE9, Firefox, Chrome, Opera and Safari
CODE:
<style>
#Container {
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border:1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 10px;
background-color:#00CC00;
/*place background image css code here and remove line above*/
}
.box {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 200px;
background-color:#CC0000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 10px;
background-color:#0000CC;
/*place background image css code here and remove line above*/
}
</style>
<div id="Container">
<div class="boxTop"></div>
<div class="box"></div>
<div class="boxBtm"></div>
</div>

Answer 2

Darcey's solution is very good. The box div with 3 divs inside, the middle one for content and the other 2 for the images (with css property background-image).
If you don't want to modify your html you could try playing with css :before and :after
Example

Answer 3

If the block has fixed height and width just set background one image and paddings. If it has fixed width use #Mr. Alien's solution. And if it has fixed height crop image horizontaly and make background repeat-x. If both width and height are dynamic i'd suggest to use 2-3 additional divs anyway (i know you want to avoid it), i dont think playing with :before and :after is better.

Answer 4

First solution: use just gradients. No images, no extra elements or even pseudo-elements.
Of course, gradients are not supported by IE9 and older, so another solution would be to use multiple backgrounds.
IE8 and older don't support multiple backgrounds the CSS3 way, but you could use AlphaImageLoader filter as fallback for these browsers.