Préambule

Nous nous sommes inspirés des sites suivants:

• Les bordures sur le grill : http://www.amaryllidaceae.org/web-jardin/CSS/moz-border-radius.htm#c5
• Tout sur les bordures en css3 : http://designshack.developpez.com/tutoriels/css/introduction-css3-bordures/

Le CSS 3 nous permet, sous la plupart des navigateurs (sauf Internet Explorer) d’insérer des bordures arrondies avec juste deux lignes de code Html et sept lignes de CSS, même plus besoin d’images.

Le code CSS :

A ajouter via la ZMI dans le fichier /portal_skins/custom/ploneCustom.css

.mlt_bordure {
    background-color: #ffffff;
    /* Le code magique pour tous les navigateurs SAUF Internet Explorer */
    -moz-border-radius: 1em; 
    -webkit-border-radius: 1em;
    /* On définit ici l’epaisseur, l’aspect et la couleur de notre bordure */
    border: 2px solid #80a6af;
    /* du padding pour écarter notre texte des bords de notre div */
    padding: 10px;
}

 Quelques explications :

• Les quatre coins des bordures peuvent aussi être définis chacun individuellement si nécessaire ...

• Bordure arrondie pour le coin haut gauche:
  -moz-border-radius-topleft
  -webkit-border-top-left-radius

• Bordure arrondie pour le coin haut droit:
  -moz-border-radius-topright
  -webkit-border-top-right-radius

• Bordure arrondie pour le coin bas gauche:
  -moz-border-radius-bottomleft
  -webkit-border-bottom-left-radius

• Bordure arrondie pour le coin bas droit:
  -moz-border-radius-bottomright
  -webkit-border-bottom-right-radius

• Les valeurs admises par ...-border-radius sont : px , em ou %.

• Le padding sera à ajuster en conséquence afin que le texte ne déborde pas des coins...

Il ne vous reste plus qu’à mettre votre texte dans la boite, c’est aussi simple que ça :
 

Utilisation du CSS dans le code html

<div class="mlt_bordure">
Mon texte, tableau ou tout le reste de mon document ICI
</div>

Et si on veut une ombre en plus

.mlt_ombre_bordure {
    background-color: #e7e7e7; */ couleur grise de l’ombre */
    /* Le code magique pour tous les navigateurs SAUF Internet Explorer */
    -moz-border-radius: 1em; 
    -webkit-border-radius: 1em;
    /* On change la couleur de la bordure pour accentuer l’effet de relief */
    border-right: 1px solid #c7c7c7;
    border-bottom: 1px solid #c7c7c7;
    /* On s’écarte du bord pour que l’ombre soit visible en bas à droite */
    padding-right: 3px;
    padding-bottom: 3px;
}

On peut utiliser les deux classes CSS ensemble de la manière suivante :

<div class="mlt_bordure mlt_ombre_bordure">
Mon texte, tableau ou tout le reste de mon document ICI
</div>

Bon travail à tous

David Delvaux et Vincent Menou