Custom graphical border on DIV with CSS

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..