title: Custom graphical border on DIV with CSS
body: <p>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 <em>"No, Nos"</em>.</p>
  
  <p>What I want is to create dynamic, flexible DIV-blocks with a custom graphical border. For <strong>example</strong> a DIV-box with shadows, but <strong>not necessarily shadows</strong>. </p>
  
  <p><strong><em>UPDATED:</em></strong>
  As, @Jeroen stated bellow in a comment, I am not only asking for "the best way to make shadows". Any crazy custom <strong>graphical border</strong>.</p>
  
  <p>I know there are some solutions with CSS3 (<code>box-shadow</code>, <code>border-image</code> and <code>border-radius</code>), but it is not <strong>100% cross-browser</strong>, specially not if you have to work with one or two versions old browsers.</p>
  
  <p><strong><em>Example image of what i want to achieve:</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/GmGR9.jpg" alt="Custom graphical border on DIV with CSS example image"></p>
  
  <p><strong><em>or</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/Cn0By.jpg" alt="Custom graphical border on DIV with CSS example image"></p>
  
  <p>The example above is actually done with one method I use frequently. It does the job and it does meet all the requirements. </p>
  
  <ul>
  <li>It adapts to different sized DIV-blocks.</li>
  <li>It uses custom graphics.</li>
  <li>It works cross-browser and versions.</li>
  <li>It is pretty easy and fast to apply.</li>
  <li>It is JavaScript free, 100% CSS/HTML.</li>
  </ul>
  
  <p>...but of course there are a few cons:</p>
  
  <ul>
  <li>It requires 8 images.</li>
  <li>It requires 8 extra DIV-blocks <em>with no real content</em>.</li>
  <li>Not very pretty in the source.</li>
  </ul>
  
  <p><strong>HTML DIV-block example:</strong></p>
  
  <pre><code>&lt;div class="flowBox"&gt;
      &lt;h1&gt;Header 1&lt;/h1&gt;
  
      Vivamus tincidun...
  
      &lt;div class="border_t"&gt;&lt;/div&gt;
      &lt;div class="border_b"&gt;&lt;/div&gt;
      &lt;div class="border_l"&gt;&lt;/div&gt;
      &lt;div class="border_r"&gt;&lt;/div&gt;
      &lt;div class="border_br"&gt;&lt;/div&gt;
      &lt;div class="border_bl"&gt;&lt;/div&gt;
      &lt;div class="border_tr"&gt;&lt;/div&gt;
      &lt;div class="border_tl"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS example:</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  &lt;!--
  .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;
  }
  --&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>As you can see, it perhaps isn't an optimal solution. 
  <strong><em>But is there a better way?</em></strong></p>
  
  <p><strong><em>UPDATED:</em></strong> There is support for shadows in most browsers and versions, even if it is not one standard. Source using css-shadow: <a href="http://pastebin.com/LZHUQRW9" rel="noreferrer">http://pastebin.com/LZHUQRW9</a>
  <em>But my question relates not only to shadows.</em></p>
  
  <p><strong><em>Full source code:</em></strong> <a href="http://pastebin.com/wxFS2PHr" rel="noreferrer">http://pastebin.com/wxFS2PHr</a></p>