Bordure image 3

Image utilisée pour les 3 côtés (150px par 150px)

<div id="bd1">2 côtés horizontaux</div>
<p>&nbsp;</p>
<div id="bd2">2 côtés verticaux</div>
<p>&nbsp;</p>
<div id="bd3">3 côtés</div>
<p>Image utilis&eacute;e pour les 3 c&ocirc;t&eacute;s</p>
<p><img src="http://ekladata.com/8mGIEnY10FxPMxFlfVcZa6GwNxE.gif" alt="" /></p>

<style><!--
#bd1{box-sizing:border-box; width:60vw; height:20vw; margin:1vh auto; padding:2vw; background:url('http://ekladata.com/28ve5_D0_giI1cJHhw80rEMEbAI/creambg.jpg'); border-top:4vw solid white; border-bottom:4vw solid white; border-image:url('http://ekladata.com/yH78h8Ysc9WB6lYgW-EwffS4vAw.gif') 100 0 100 0 repeat;}
#bd2{box-sizing:border-box; width:60vw; height:20vw; margin:1vh auto; padding:2vw; background:url('http://ekladata.com/28ve5_D0_giI1cJHhw80rEMEbAI/creambg.jpg'); border-right:3vw solid white; border-left:3vw solid white; border-image:url('http://ekladata.com/yH78h8Ysc9WB6lYgW-EwffS4vAw.gif') 0 100 0 100 repeat;}
#bd3{box-sizing:border-box; width:60vw; height:20vw; margin:1vh auto; background:url('http://ekladata.com/28ve5_D0_giI1cJHhw80rEMEbAI/creambg.jpg'); border:4vw solid white; border-image:url('http://ekladata.com/8mGIEnY10FxPMxFlfVcZa6GwNxE.gif') 50 round; }
--></style>

Pour régler la taille de l'image qui se répète, vous pouvez jouer sur la taille de la bordure: border:4vw solid white ... ex:4vw -->3vw.

Dans le dernier cas (3 côtés), si vous voulez une bordure verticale à gauche, il vous faudra créer une image adaptée.