title: CSS border-image negative offset (without HTML edition)
body: <p>We are looking to obtain exactly this type of border for almost all <strong>img</strong> tags inside the content area of a CMS (wordpress/joomla) site (that's why we are searching for a solution using only CSS, <strong><em>without accesing any parent tag</em></strong>):</p>
  
  <p><img src="https://i.stack.imgur.com/QeWIJ.png" alt="CSS border-image negative offset"></p>
  
  <p>First step goes smoothly with the code form here:
  <a href="http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fi.imgur.com%2FnFVLkAl.png%22%2C%22linkBorder%22%3Afalse%2C%22borderWidth%22%3A%5B36%2C36%2C36%2C36%5D%2C%22imageOffset%22%3A%5B36%2C36%2C36%2C36%5D%2C%22fill%22%3Atrue%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D" rel="nofollow noreferrer">http://border-image.com/</a> (the link should show our border image used),
  <strong>but it creates a space</strong> between the image and the edge of the actual border.</p>
  
  <p><img src="https://i.stack.imgur.com/cJIPo.png" alt="CSS border-image normal"></p>
  
  <p>We first tried some CSS rules that could do the job, but:</p>
  
  <ol>
  <li><code>border-image-outset</code>: it only extends to outside, not inside, helps for cases where background is solid color</li>
  <li><code>outline-offset</code>: works only for the outline, doesn't affects the border-image</li>
  <li><strong><em>Multiple Backgrounds</em></strong>: Is the nearest one, but the borders show BELOW the image, so it needs to have a padding applied. We are expecting it to be partially over the image as intended (indeed it is what we've implemented until now).</li>
  </ol>
  
  <p>We have already found many similar questions and tried using the most applicable answers:</p>
  
  <ol>
  <li><code>::after</code> : it needs the image to have content="" which disappears it.</li>
  <li>jquery <code>$(img).after</code>: We can't position the border elements relatively to the correspondent image, as they are precisely inserted AFTER the image (the same with before). We would require to set this on the parent tag which most times doesn't has the same size of the img. We are at the moment trying some wrap.</li>
  </ol>
  
  <p>Until now we haven't been able to solve the problem as intended.</p>
  
  <p><a href="http://jsfiddle.net/0ubx770v/1/" rel="nofollow noreferrer">Here's a JSfiddle</a> where we are making tests with all above 5 options and have enough material to work (neat image, grouped and separated corners, all mentioned codes appliead, etc).</p>
  
  <p>We would really appreciate somebody achieving the exact result applicable for the <strong>img</strong> tag.</p>