title: Technique for adding flourishes to div corners and borders: CSS3 Multiple Backgrounds or Border Images?
body: <p>I'm 'embellishing' an existing website with some nice flourishes to the corners and borders of a content <code>div</code>.  Without changing the markup at all (as it is generated by a CMS), how can I add 'flourish' images (ie <a href="http://www.flickr.com/photos/29685293@N07/2783079594/" rel="nofollow noreferrer">corner flourishes like this</a>) and fancy borders using CSS only?  </p>
  
  <p>Fancy ASCII Art representation of what I want to achieve (outer border represents div):</p>
  
  <pre><code>---------------------------------------------
  |                                           |
  |  #%%%      ....................      %%%# |
  |  %                                      % |
  |  %                                      % |
  |                                           |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  | .                                       . |
  |                                           |
  | %                                       % |
  | %                                       % |
  | #%%%      ....................       %%%# |
  ---------------------------------------------
  </code></pre>
  
  <p>The div can expand vertically.  It needs to work across browsers (CSS3PIE is being used).  And the div already has a background image. </p>
  
  <p>Is <a href="http://www.w3.org/TR/css3-background/#layering" rel="nofollow noreferrer">CSS3 Multiple Backgrounds</a> the way to go?  Or are <a href="http://www.w3.org/TR/css3-background/#border-images" rel="nofollow noreferrer">CSS3 Border Images</a> the best way?</p>
  
  <p>Which technique will give the best flexibility in terms of the handling the vertically expanding div as well as how far inset the borders / corners can be?</p>