border-image #4

Example of how a border can be stretched to create a Gradient.

HTML

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

CSS

#border-stretch {
    border: 10px solid #2a3e46;
    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;
}