La propriété CSS -moz-border-radius permet d’arrondir les coins de bordure d’une balise dans le navigateur Mozilla Firefox.
p {
-moz-border-radius: 5px 10px;
}
-
Elle prend comme valeurs de un à quatre nombre à la suite en px ou nombre en % ou nombre en pt ou nombre en em, – inherit (hérite de son parent)
- Si la propriété est suivie d’une valeur, celle-ci s’applique à tous les coins.
- Si la propriété est suivie de deux valeurs, la première s’applique aux coins haut-gauche et bas-droit; la seconde valeur s’applique aux coins bas-gauche et haut-droit.
- si la propriété est suivie de trois valeurs, elles s’applique respectivement aux coins haut gauche, haut droit, bas droit et le coin bas gauche prend la même valeur que le coin haut droit.
- Si la propriété est suivie de quatre valeurs, chaque valeurs s’applique respectivement aux quatre coins : haut-gauche haut-droit bas-droit bas gauche.
-
On peut être plus précis en utilisant les propriétés suivantes qui prennent une valeur :
- -moz-border-bottom-left-radius (bas gauche)
- -moz-border-bottom-right-radius (bas droite)
- -moz-border-top-left-radius (haut gauche)
- -moz-border-top-right-radius (haut droit)
Exemple :
Bien sûr il faut avoir un navigateur qui supporte cette propriété CSS !
<p style="border:1px solid #77ccff; -webkit-border-radius: 5px 10px; -moz-border-radius: 5px 10px; border-radius: 5px 10px; padding:10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit. </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.