title: How to use border image along one side only?
body: <p>I have an image that I'd like to set as the border on an element, but only as the bottom border: <img src="https://i.stack.imgur.com/zoyoM.png" alt="the border image"> &lt;- It's teeny - but it's right there.</p>
  
  <p>Here is what I've got so far:</p>
  
  <pre><code>&lt;style&gt;
  body { margin: 0; padding: 10px; }
      h1 {
  background-color: red;
      border: solid transparent;
      border-width: 2px;
      border-image: 2 repeat url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZGBgOMOABv7//48uxMDEQCQgWiFAgAEAjqADz4EvP7IAAAAASUVORK5CYII=");
  }
  &lt;/style&gt;
  &lt;h1&gt;Bacon&lt;/h1&gt;
  &lt;p&gt;Bacon ipsum dolor sit amet tenderloin drumstick ribeye filet mignon t-bone beef ribs. Tri-tip venison turkey salami drumstick chicken pastrami. Frankfurter pork jowl ball tip tail.&lt;/p&gt;
  </code></pre>
  
  <p>Or see JS Fiddle: <a href="http://jsfiddle.net/eqpt5/" rel="noreferrer">http://jsfiddle.net/eqpt5/</a>.  </p>
  
  <p>As you can see, this puts the border image on both the top and bottom (and the sides - though you can't see it). How can I put a border image on only the bottom using <code>border-image</code>?</p>