simple border-image

by Marie GĂ©rard

HTML

<div class="box">
                    Cras tortor turpis, vulputate non, accumsan a, pretium in, magna. 
                    Cras turpis turpis, pretium pulvinar, pretium vel, nonummy eu, leo. 
    </div>

    <div class="box xmas">
                    Cras tortor turpis, vulputate non, accumsan a, pretium in, magna. 
                    Cras turpis turpis, pretium pulvinar, pretium vel, nonummy eu, leo.
    </div>

CSS

body {
    font: 12px/1.4 sans-serif;
}
.box {
    width: 150px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    float: left;
    /* IE Fallback */
    border: 7px double green;
}
.xmas {
    -webkit-border-image: url("http://maddesigns.de/wp-content/uploads/2011/12/border-image-xmas.png") 12 repeat;
       -moz-border-image: url("http://maddesigns.de/wp-content/uploads/2011/12/border-image-xmas.png") 1 repeat;
         -o-border-image: url("http://maddesigns.de/wp-content/uploads/2011/12/border-image-xmas.png") 10 repeat;
            border-image: url("http://maddesigns.de/wp-content/uploads/2011/12/border-image-xmas.png") 19 repeat;

    border-width: 14px;
}