Use border image only for bottom border? Our CSS seems to replicate the image across the whole div instead

Method 1: set 0 width to all (except border-bottom):

border-image:url("http://lorempixel.com/g/400/100/?example.jpg");
border-top:0;
border-left:0;
border-right:0;
// btw, you can use "one-line" command>   border-width: 0 0 3px 0;

Method 2: with style.css, create ::AFTER phseudo-element:

.yourDiv::after { 
    content:"";
    height:20px; 
    width:100%; /* or i.e: 500px */
    background:url("http://lorempixel.com/g/400/100/?example.jpg");
}

Try with -webkit-border-bottom-image . Don't forget to include non-webkit browsers. Here is an useful link : http://css-tricks.com/understanding-border-image/

You've defined it to repeat as "round": http://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp

Here's how you can define each individual attribute:

div { background:gray; 
      width:100px;
      height:100px;
      margin-left:20px;
      -webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png);
      -webkit-border-image-width: 0 0 8px 0;
      -webkit-border-image-repeat: stretch;
      border-image: url(http://www.panabee.com/images/dumpling/footer_list.png);
      border-image-width: 0 0 8px 0;
      border-image-repeat: stretch;
     }