Faire de jolis cadres CSS

<div style="width: 600px;  margin: auto; 2px solid #1c75c8; padding: 3px; background-color: #c5ddf6; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;">
<p>
<strong>Cadre d'information</strong>: Copier/coller le code présent ci-dessous pour mettre en place le même code sur votre site Jimdo.
</p>
</div>

<div style="width: 600px;  margin: auto;padding:5px; background-color:#9ba0ee; border:2px solid #656ab0; -moz-border-radius:9px; -khtml-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;">
<div style="font-size: 3em; float: left; width: 40px; text-align: center; margin-right: 5px; height: 20px; padding:3px;">?</div>
<strong>Cadre d'information</strong>: Ce cadre est idéal pour insérer un texte informatif que les leclteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
</div>

<div style="width: 600px;  margin: auto;padding:5px; background-color:#ffaca3; border:2px solid #ff3924; -moz-border-radius:9px; -khtml-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;">
<div style="padding: 4px; font-size: 3em; float: left; width: 40px; text-align: center; margin-right: 5px; height: 20px;">!</div>
<strong>Cadre d'avertissement</strong>: Ce cadre est idéal pour insérer un texte d'avertissement que les leclteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
</div>

<div style="width: 600px;  margin: auto;padding:3px; border:2px dotted #a5a5a5; background-color:#e3e3e3;">
<strong>Cadre pointillés</strong>: Pour utiliser ce cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.
</div>

<div style="width: 600px;  margin: auto;padding:3px; border:5px double #ff6b00; background-color:#ffdbc1;">
<strong>Cadre important</strong>: Idéal pour mettre une information en valeur sur son site. Pour réaliser un cadre similaire, il suffit de se servir du code présenté ci-dessous en utilisant "copier/coller".
</div>

<div style="width: 600px;  margin: auto;padding:3px; padding-left:6px; border-left:4px solid #d0d0d0; background-color:#f1f1f1; margin-left:20px; font-style:italic;">
<strong>Cadre de citation</strong>: Idéal pour citer les propos de quelqu'un dans un texte. Pour utiliser ce cadre il suffit de copier et coller le code ci-dessous.
</div>

<div style="width: 600px;  margin: auto;padding:3px; padding-left:6px; border:1px dotted #d0d0d0; border-left:4px solid #d0d0d0; margin-left:20px; font-style:italic;">
<strong>Cadre de citation 2</strong>: Idéal pour citer les propos de quelqu'un dans un texte. En copiant-collant le code ci-dessous vous pourrez utiliser ce cadre sur votre site.
</div>

<div style="width: 600px;  margin: auto;padding:3px; border:2px dashed #c0c0c0;">
<strong>Cadre tirets</strong>: Cadre idéal pour une information à <em>découper</em>, autrement dit des informations tel que les coupons de réduction, les bulletin à remplir ...<br />
Pour reproduire ce cadre sur votre site web, il suffit de recopier le code HTML ci-dessous, tout simplement en le copiant/collant.
</div>

<div style="width: 600px;  margin: auto;padding:4px; border:4px solid #e0e0e0;">
<div style="padding:3px; background-color:#e0e0e0;">
<strong>Cadre de contenu neutre</strong>: Ce cadre assez simpliste et discret peut être installer simplement en copiant/collant le code ci-dessous.
</div>
</div>

<div style="width: 600px;  margin: auto;padding:3px; background-color:#888;">
<div style="padding:4px; border-top:8px dotted #fff; border-bottom:8px dotted #fff;">
<strong>Cadre cinéma</strong>: Rien de mieux pour un site qui a pour thématique le cinéma. Une utilisation originale pourrait être de mettre des vignettes d'un film dedans. Pour ce servir de ce cadre, il suffit de se recopier ou de copier/coller le code présent juste en dessous.
</div>
</div>

<div style="width: 600px;  margin: auto;padding:3px; border-top:5px dashed #fff; border-bottom:5px dashed #fff; background-color:#e3e3e3;">
<strong>Cadre orignal</strong>: Pour mettre en place ce cadre il suffit de copier-coller le code ci-dessous. Pour personnaliser ce cadre, il est possible de modifier la couleur de fond (c'est-à-dire le code e3e3e3).
</div>

<div style="padding:5px; width:300px; margin:auto; border:8px solid #67ab9f; background-color:#b3d8d2; -moz-border-radius:20px; -khtml-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;">
<strong>Cadre peu large</strong>: Pour personnaliser la largeur de ce cadre, il faut modifier la valeur présent après le "width". La valeur actuel est de 300 pixels.<br />
Pour utiliser le cadre, il faut recoper le code présent juste en dessous.
</div>

<div style="width: 600px;  margin: auto;padding:3px; border:4px inset #4cdc67; background-color:#4cdc67;">
<strong>Cadre 1</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
</div>

<div style="width: 600px;  margin: auto;padding:3px; border:4px outset #ee6388; background-color:#ee6388;">
<strong>Cadre 2</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
</div>

<div style="width: 600px;  margin: auto;padding:3px; border:8px ridge #d04cdc; background-color:#d04cdc;">
<strong>Cadre 3</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
</div>