Edit in JSFiddle

<div id="border-stretch">Example of how a border can be stretched to create a Gradient</div>

#border-stretch {
    border: 10px solid #2a3e46;
    -webkit-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/fun.png) 10 stretch;
       -moz-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/fun.png) 10 stretch;
        -ms-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/fun.png) 10 stretch;
         -o-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/fun.png) 10 stretch;
            border-image: url(http://css-plus.com/examples/2012/04/border-image/img/fun.png) 10 stretch;
    
    padding: 10px;
    text-align: center;
}