jsFiddle

• Run again
• Edit this fiddle

• Result
• CSS
• HTML

*{margin:0;padding:0;}
body{max-width:480px;width:90%;margin:2em auto;background:#fafaf3;}

img{
    margin: 1em auto;
    max-width:100%;
    padding: 1%;
    height:auto;
}

/*- Gradient Border Code ----------*/
.gradient-dual img { 
background: #000000;
background: -moz-linear-gradient(left, #000000 0%, #000000 1%, #ff0084 1%, #ff0084 50%, #000000 50%, #000000 99%, #ff0084 99%, #ff0084 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(1%,#000000), color-stop(1%,#ff0084), color-stop(50%,#ff0084), color-stop(50%,#000000), color-stop(99%,#000000), color-stop(99%,#ff0084), color-stop(100%,#ff0084));
background: -webkit-linear-gradient(left, #000000 0%,#000000 1%,#ff0084 1%,#ff0084 50%,#000000 50%,#000000 99%,#ff0084 99%,#ff0084 100%);
background: -o-linear-gradient(left, #000000 0%,#000000 1%,#ff0084 1%,#ff0084 50%,#000000 50%,#000000 99%,#ff0084 99%,#ff0084 100%);
background: -ms-linear-gradient(left, #000000 0%,#000000 1%,#ff0084 1%,#ff0084 50%,#000000 50%,#000000 99%,#ff0084 99%,#ff0084 100%);
background: linear-gradient(left, #000000 0%,#000000 1%,#ff0084 1%,#ff0084 50%,#000000 50%,#000000 99%,#ff0084 99%,#ff0084 100%);
}

.gradient-vertical img { 
    background: -moz-linear-gradient(top, #5b3838 0%, #d43f3f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b3838), color-stop(100%,#d43f3f));
    background: -webkit-linear-gradient(top, #5b3838 0%,#d43f3f 100%);
    background: -o-linear-gradient(top, #5b3838 0%,#d43f3f 100%);
    background: -ms-linear-gradient(top, #5b3838 0%,#d43f3f 100%);
    background: linear-gradient(top, #5b3838 0%,#d43f3f 100%);
}

.gradient-horizontal img { 
    background: -moz-linear-gradient(left, #454d37 0%, #97c84b 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#454d37), color-stop(100%,#97c84b));
    background: -webkit-linear-gradient(left, #454d37 0%,#97c84b 100%);
    background: -o-linear-gradient(left, #454d37 0%,#97c84b 100%);
    background: -ms-linear-gradient(left, #454d37 0%,#97c84b 100%);
    background: linear-gradient(left, #454d37 0%,#97c84b 100%);
}

.gradient-horizontal-multi img { 
    background: -moz-linear-gradient(left, #75d7ec 0%, #75d7ec 20%, #97c84b 20%, #97c84b 40%, #cfa9ea 40%, #cfa9ea 60%, #ec9f9f 60%, #ec9f9f 80%, #fa9300 80%, #fa9300 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#75d7ec), color-stop(20%,#75d7ec), color-stop(20%,#97c84b), color-stop(40%,#97c84b), color-stop(40%,#cfa9ea), color-stop(60%,#cfa9ea), color-stop(60%,#ec9f9f), color-stop(80%,#ec9f9f), color-stop(80%,#fa9300), color-stop(100%,#fa9300));
    background: -webkit-linear-gradient(left, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
    background: -o-linear-gradient(left, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
    background: -ms-linear-gradient(left, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
    background: linear-gradient(left, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
}

.gradient-vertical-multi img { 
    background: #75d7ec;
    background: -moz-linear-gradient(top, #75d7ec 0%, #75d7ec 20%, #97c84b 20%, #97c84b 40%, #cfa9ea 40%, #cfa9ea 60%, #ec9f9f 60%, #ec9f9f 80%, #fa9300 80%, #fa9300 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75d7ec), color-stop(20%,#75d7ec), color-stop(20%,#97c84b), color-stop(40%,#97c84b), color-stop(40%,#cfa9ea), color-stop(60%,#cfa9ea), color-stop(60%,#ec9f9f), color-stop(80%,#ec9f9f), color-stop(80%,#fa9300), color-stop(100%,#fa9300));
    background: -webkit-linear-gradient(top, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
    background: -o-linear-gradient(top, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
    background: -ms-linear-gradient(top, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
}

.gradient-diagonal-multi img { 
    background: -moz-linear-gradient(45deg, #75d7ec 0%, #75d7ec 20%, #97c84b 20%, #97c84b 40%, #cfa9ea 40%, #cfa9ea 60%, #ec9f9f 60%, #ec9f9f 80%, #fa9300 80%, #fa9300 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#75d7ec), color-stop(20%,#75d7ec), color-stop(20%,#97c84b), color-stop(40%,#97c84b), color-stop(40%,#cfa9ea), color-stop(60%,#cfa9ea), color-stop(60%,#ec9f9f), color-stop(80%,#ec9f9f), color-stop(80%,#fa9300), color-stop(100%,#fa9300));
    background: -webkit-linear-gradient(45deg, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
    background: -o-linear-gradient(45deg, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
    background: -ms-linear-gradient(45deg, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
    background: linear-gradient(45deg, #75d7ec 0%,#75d7ec 20%,#97c84b 20%,#97c84b 40%,#cfa9ea 40%,#cfa9ea 60%,#ec9f9f 60%,#ec9f9f 80%,#fa9300 80%,#fa9300 100%);
}

<figure class="gradient-horizontal-multi">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/1.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-vertical-multi">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/99.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-diagonal-multi">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/11.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-dual">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/17.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-vertical">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/19.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-horizontal">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/71.jpeg" alt="Placeholder" />
</figure>