Использовать изображение рамки только для нижней границы? Похоже, что наш CSS копирует изображение по всему элементу div

Мы хотели бы использовать изображение только для нижней части DIV. Однако наш CSS каким-то образом копирует изображение по всему телу DIV вместо того, чтобы размещать его внизу.

Что мы делаем не так?

Нам нужно только поддерживать мобильный Safari.

Пример:http://jsfiddle.net/ZwnF8/

Код:

​

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