title: Stretch background image with border image
body: <p>The following image represents the desired outcome.</p>
  
  <p><a href="https://i.stack.imgur.com/2OVjB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2OVjB.jpg" alt="Black or colored background with unique edges"></a></p>
  
  <p>Typically I'd apply such case using 3 divs:</p>
  
  <pre><code>&lt;div class="holder"&gt;
      &lt;div class="edge left"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;background color or image stretched here&lt;/div&gt;
      &lt;div class="edge right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This sounds like an overuse of semantics, so I decided to try using <code>border-image</code>, and this is the end result:</p>
  
  <p><a href="https://i.stack.imgur.com/0thKt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0thKt.jpg" alt="enter image description here"></a></p>
  
  <p>But, if I set a background color, it will act as a background for the borders too (can be solved using JPEG instead of PNG with a white background -but this isn't a solution-).</p>
  
  <p>Any ideas or suggestions? Is the use of <code>border-image</code> recommended in the first place (any browser rendering variability?).</p>
  
  <p>The image used and code are below:</p>
  
  <p><a href="https://i.stack.imgur.com/5foMd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5foMd.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;ul id="nav"&gt;
     &lt;li&gt;&lt;a href="#"&gt;Test data Test data Test Data&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  #nav {
      border-width: 0px 38px;
      border-image: url(images/nav-border.png) 0 50;
      height: 30px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/y7g7w1b3/" rel="nofollow noreferrer">https://jsfiddle.net/y7g7w1b3/</a></p>