CSS Border image from a url - not working - html

Question

I would like to style the border image the same as in w3school example: http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image.
But when I tried it in my desktop, https://jsfiddle.net/tangjeen/6yLtmb98/ the result of the border image is not the same.
Would appreciate if you could help me. Thank you.
<div class="row" id="round">
<p>sdfsfsdf</p>
</div>
#round{
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round;
background-color: lightyellow;
}

Answer 1

Make sure the border-width: 15px;/*your value*/ and border-style: solid; /*needed for Firefox*/ are set.
Or the shorthand way border: 15px solid transparent;. ALSO need to make sure it's set BEFORE border-image rule.
#round {
border-width: 15px;
border-style: solid;
border-image: url("https://i.imgur.com/BzbWBYA.png") 30 30 round;
background-color: lightyellow;
}
<div id="round">
<p>hello world!</p>
</div>

Answer 2

To resolve this problem you can also adjust the border-image-width and add a padding to your block:
#round{
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round;
border-image-width: 15px;
padding: 5px 0px 5px 15px;
background-color: lightyellow;
}

Answer 3

I'd use this :
#round img{
border: imgpath;
}
EDIT
By the way, your code works... look : http://jsfiddle.net/5Lyw6qek/