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

Question

We would like to use an image only for the bottom of a DIV. However, our CSS somehow replicates the image across the body of the DIV instead of placing it at the bottom.

What are we doing wrong?

We only need to support mobile Safari.

Example: http://jsfiddle.net/ZwnF8/

Code:

<div></div>​

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

Answer 1

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");
}

Answer 2

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/

Answer 3

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;
     }