Border Image

HTML

<div class="box">
    <p>Why does the page background show through??</p>
</div>

CSS

body { background: orange; padding: 30px; }
    .filling { background: white; height: inherit; margin-top: -16px; }
    .box {
        margin: auto auto;
        width: 200px; height: 200px;
        border-width: 31px 25px 25px 20px;
        -moz-border-image: url(http://games4e.com/image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        -webkit-border-image: url(http://games4e.com/image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        -o-border-image: url(http://games4e.com/image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        border-image: url(http://games4e.com/image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: white;
    }