lundi 9 mars 2009

[css] Un rectangle arrondi avec contours de couleur

Comment faire, en CCS, un rectangle arrondi avec une bordure de couleur ? La réponse ici, valide et sans intervention d'images. Et ça marche sur IE6 et IE7 !

En résumé, les CSS :
/* La ligne supprérieur et la ligne inférieure */
.bordertop, .boderbottom {display:block; background:transparent; font-size:1px;}
/* Style qui défini les coin arondi */
/* Vous pouvez changer la couleur et la taille (mais avec prudence) */
.coin1, .coin2, .coin3, .coin4 {display:block; overflow:hidden;}
.coin1, .coin2, .coin3 {height:1px;}
.coin2, .coin3, .coin4 {background:#0000FF; border-left:1px solid #FF0000; border-right:1px solid #FF0000;}
.coin1 {margin:0 5px; background:#FF0000;}
.coin2 {margin:0 3px; border-width:0 2px;}
.coin3 {margin:0 2px;}
.coin4 {height:2px; margin:0 1px;}
/* Le contenu, pris entre la ligne supérieure et la ligne inférieure */
/* Vous pouvez changer la couleur */
.content {display:block; background:#0000FF; border:0 solid #FF0000; border-width:0 1px;}


Le code HTML :
<b class="bordertop"><b class="coin1">&nbsp;</b><b class="coin2">&nbsp;</b><b class="coin3">&nbsp;</b><b class="coin4">&nbsp;</b></b>
<div class="content">
Mon contneu<br/>
Avec ses beaux coins
</div>
<b class="boderbottom"><b class="coin4">&nbsp;</b><b class="coin3">&nbsp;</b><b class="coin2">&nbsp;</b><b class="coin1">&nbsp;</b></b>

... à adapter selon le contexte, la charte graphique, etc. Exemple ici.

0 commentaires: