Custom graphical border on DIV with CSS - html

Question

Ok, so this is a problem that has been nagging me for a while and I've seen a few good and bad solutions to it. But what is the best solution, and what is the pitfalls, drawbacks and big "No, Nos".
What I want is to create dynamic, flexible DIV-blocks with a custom graphical border. For example a DIV-box with shadows, but not necessarily shadows.
UPDATED:
As, #Jeroen stated bellow in a comment, I am not only asking for "the best way to make shadows". Any crazy custom graphical border.
I know there are some solutions with CSS3 (box-shadow, border-image and border-radius), but it is not 100% cross-browser, specially not if you have to work with one or two versions old browsers.
Example image of what i want to achieve:
or
The example above is actually done with one method I use frequently. It does the job and it does meet all the requirements.
It adapts to different sized DIV-blocks.
It uses custom graphics.
It works cross-browser and versions.
It is pretty easy and fast to apply.
It is JavaScript free, 100% CSS/HTML.
...but of course there are a few cons:
It requires 8 images.
It requires 8 extra DIV-blocks with no real content.
Not very pretty in the source.
HTML DIV-block example:
<div class="flowBox">
<h1>Header 1</h1>
Vivamus tincidun...
<div class="border_t"></div>
<div class="border_b"></div>
<div class="border_l"></div>
<div class="border_r"></div>
<div class="border_br"></div>
<div class="border_bl"></div>
<div class="border_tr"></div>
<div class="border_tl"></div>
</div>
CSS example:
<style type="text/css">
<!--
.flowBox {
background:#FFFFFF;
margin:10px;
float:left;
padding:10px;
width:250px;
position:relative;
}
.border_t {
background:url(border_t.png) repeat-x;
position:absolute;
top:-2px; left:0;
width:100%;
height:2px;
}
.border_b {
background:url(border_b.png) repeat-x;
position:absolute;
bottom:-6px; left:0;
width:100%;
height:6px;
}
.border_l {
background:url(border_l.png) repeat-y;
position:absolute;
top:0; left:-3px;
width:3px;
height:100%;
}
.border_r {
background:url(border_r.png) repeat-y;
position:absolute;
top:0; right:-6px;
width:6px;
height:100%;
}
.border_br {
background:url(border_br.png);
position:absolute;
bottom:-6px; right:-6px;
width:6px;
height:6px;
}
.border_bl {
background:url(border_bl.png);
position:absolute;
bottom:-6px; left:-3px;
width:3px;
height:6px;
}
.border_tr {
background:url(border_tr.png);
position:absolute;
top:-2px; right:-5px;
width:5px;
height:2px;
}
.border_tl {
background:url(border_tl.png);
position:absolute;
top:-2px; left:-2px;
width:2px;
height:2px;
}
-->
</style>
As you can see, it perhaps isn't an optimal solution.
But is there a better way?
UPDATED: There is support for shadows in most browsers and versions, even if it is not one standard. Source using css-shadow: http://pastebin.com/LZHUQRW9
But my question relates not only to shadows.
Full source code: http://pastebin.com/wxFS2PHr

Answer 1

Have a look at http://css3pie.com
This will allow you to use CSS 3 elements in older browsers and should hopefully help to keep your markup cleaner.
You could also include some additional logic which will use CSS 3 for browsers that support it, and revert back to the CSS Pie functionality for other browsers.

Answer 2

You could try something like this: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
I think there are many more libraries - JavaScript, .htc things, whatever... - to achieve the same.
Edit: I think you won't get around using 8 different pictures. But you could write a javascript that adds the required DIVs on the fly e.g. for each DIV with class border.
That would clean up your HTML markup - but the DOM remains complex..

Answer 3

Perhaps this article on css-tricks using border-image is what you're looking for? The interactive demo it links to seems to do what you ask for.
Of course this solution is only available in browsers that support css3 border-image. The demo above did work for me in FF and Chrome, but not in IE9. According to the Modernizr documentation it can be used to add support for border-image, but I haven't tried that for myself. Should that work then this would give you a relatively clean solution.