Custom graphical border on DIV with CSS
css, html, layout
Solution
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.
Problem
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