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

css, html

Solution

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

Problem

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 }​ ```

Original source