title: Overlay image on div border top left
body: <p>I have a div with a border of 1 px. I have a square transparent-in-parts png image much smaller than the div 48px * 48px. </p>
  
  <p>I'd like to position the square image such that it overlays the top left border of the div giving the appearance of both top and left borders going underneath the image.</p>
  
  <p>Using background-image 'left top' puts the image inside the div borders which is not what I'm looking for. Wish I could show an example but I don't have any. Hope my question describes it well. </p>
  
  <p>Here's the JSFiddle: <a href="http://jsfiddle.net/9sn22/1/" rel="nofollow">http://jsfiddle.net/9sn22/1/</a></p>
  
  <pre><code>&lt;div id='mybox'&gt;text&lt;/div&gt;
  
  #mybox {
  text-indent: 0.5in;
  background-image:url('http://aerbook.com/site/images/quote-mark-icon-black.png');
  border-radius:3px;
  border: 1px solid #cccccc;
  height: 300px;
  font-weight: 200;
  text-indent: 0.35in;
  padding: 20px;
  background-repeat:no-repeat;
  background-position: left top;
  }
  </code></pre>