Edit on
<div class="bi">
<p><strong>This box uses border images. Use the resize handle in the bottom right corner of the box to see the fluid nature of the border.</strong></p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

<p>See <a href="http://www.sitepoint.com/12-little-known-css-facts/">article</a>.</p>
body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.bi {
    border: 45px solid transparent;
    -webkit-border-image: url(http://sitepoint-examples.s3.amazonaws.com/css3-border-image/bg-pawprints-all.jpg) 45 round;
    -moz-border-image: url(http://sitepoint-examples.s3.amazonaws.com/css3-border-image/bg-pawprints-all.jpg) 45 round;
    border-image: url(http://sitepoint-examples.s3.amazonaws.com/css3-border-image/bg-pawprints-all.jpg) 45 round;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    width: 500px;
    margin: 30px auto 30px auto;
    overflow: hidden;
    resize: both;
}
Rerun