Strange behaviour with border-image CSS

Question

I have an image that I would like to use as div's border and background. The below code (and fiddle) produces undesirable white background inside the div despite using background: transparent !important; or background: none !important; (I tried both).

Here's the image I'm using:

Here's the effect I'm getting:

Here's the effect I want:

Strangely, I can achieve the desired effect by opening Web Inspector in Chrome and toggling the border-image property after page render. Simply turning the border-image off and back on, I get the result I want:

HTML

<div>test</div>

CSS

div {
    -webkit-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Opera 11-12.1 */
    border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round;
}

So if the browser can render it, why can't I write it? :) Any help/suggestions would be great.

Please note I have already tried setting the image to be the div's background-image instead of border-image and that did not produce desired results either (scaling the image to prevent the border from getting cut off was simply too much guess work since the textual contents of the div are dynamic).

Answer 1

You're lacking the fill keyword: the standard says:

The ‘fill’ keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)

See updated fiddle: writing 30 30 fill seems to solve your issue.