9

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:

Custom graphical border on DIV with CSS example image

or

Custom graphical border on DIV with CSS example image

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

3
  • You write "for example [...] shadows". Most answers will probably go towards cross-browser styles for box-shadow, but if you want other "funky" borders (rainbow pattern borders with crawling ants on top of them perhaps?) as well it's perhaps wise to update the question to reflect that?
    – Jeroen
    May 8, 2012 at 14:04
  • @Jeroen Good point. I updated the question with both more information and a new image example. Thanks!
    – lejahmie
    May 8, 2012 at 14:47
  • 1
    Haha love the example :D
    – Jeroen
    May 8, 2012 at 18:19

3 Answers 3

3

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.

2
  • Yes, this is a good library. But make sure you use the most recent version as there were some issues with zooming in/out a website causing a freeze of IE, forcing you to kill it with the task manager.
    – flooooo
    May 8, 2012 at 14:09
  • Interesting, I will definitely have a look at this. Thanks! Even thou it is a JavaScript solution to a none JavaScript problem.
    – lejahmie
    May 8, 2012 at 14:56
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..

1
  • Thanks taking your time and anwsering. But my concern was not only regarding how to make shadows, but any graphical border. I have updated my question to clarify this. But, an update on browser support for shadows is always good. I have had problems with this before, and have avoided using it. But there are ways for doing shadows, that do work in all browsers, and that is good, even if we still await official support for CSS3 standards.
    – lejahmie
    May 8, 2012 at 14:55
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.