Infinite Frames

Create infinite frames or borders using the new border-image syntax.

by Ali Khaled

HTML

<script src="https://raw.github.com/desandro/masonry/master/jquery.masonry.min.js"></script>
<div class="frame">
    <img src="http://placekitten.com/100/400">
</div>

<div class="frame">
    <img src="http://placekitten.com/130/150">
</div>

<div class="frame">
    <img src="http://placekitten.com/170/150">
</div>

<div class="frame">
    <img src="http://placekitten.com/345/205">
</div>


<div id="notes">
    <p>Please keep in mind that this technique is an atrocious abuse of semantics. It was purely created for demonstrational purposes and shouldn't be used in a legitimate production setting unless optimized.
        <br><br>My other work: <a href="http://dribbble.com/noxxten">Dribbble</a> - <a href="http://noxxten.com">Portfolio</a> - <a href="http://twitter.com/noxxten">Twitter</a></p></div>

CSS

body {
    width: 600px;
    padding: 5px;
    background: #777;}

.frame {
    display: inline-block;
    float: left;
    margin: 10px;
    border-color:#fff;
    border-width: 12px 12px 12px 12px;
    border-image:url("http://cl.ly/3H0d3Q2r2X0u1l2N3d1Z/frame-bg.png") 12 12 12 12 repeat;
    -webkit-box-shadow:
        0 2px 15px #555,
        inset 0 1px 5px #555;}

.frame img {
    vertical-align: top;
    -webkit-box-shadow: inset 0 1px 5px #555;}




/* ====================================================================
========================= UNRELATED STYLING ===========================
==================================================================== */



#notes {
    background: #eee;
    width: 515px;
    margin: 10px;
    float: left;
    -webkit-box-shadow:
        0 2px 15px #555;}

#notes p {
    color: #777;
    font: 10pt/17pt arial;
    padding: 30px;
    text-shadow: 0 1px 0 #fff;}

a:link, a:active, a:visited {color: inherit;}
a:hover {color: #ae0000;}