CSS Border Image

by Kyle Mitofsky

HTML

<div class="banner">
    content<br/>
    content<br/>
    content<br/>
</div>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/23222966/1366033'>HTML rectangle box with angled corners</a><br/>                
    Generate CSS For Border Image: <a href='http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fi.imgur.com%2FziNitLf.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B39%2C43%2C41%2C46%5D%2C%22fill%22%3Afalse%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A0.5599647266313933%2C%22setRepeat%22%3Atrue%7D'>border-image.com</a><br/>
<div>

CSS

body {
    background: green;
}
.banner {
    border-style: solid;
    border-width: 39px 43px 41px 46px;
    
    -webkit-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
       -moz-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
         -o-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
            border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 fill repeat;
}