-moz-border-radius

Hérité : non   -   Compatibilité : Mozilla uniquement

Cette forme courte de propriété permet de définir le rayon d'un ou plusieurs coins de bordure. Le nombre de valeurs spécifiées détermine à quels côtés de la bordure ces valeurs doivent être appliquées.

Les valeurs possibles pour cette propriété diffèrent des valeurs de la propriété border-radius figurant dans la norme préliminaire de CSS3.

Les membres du forum Alsacreations ont tenté de mettre en place des solutions compatibles avec Internet Explorer.

Syntaxe CSS
-moz-border-radius: radius {1,4}
Valeur(s) possible(s) pour cette propriété :

Vous pouvez définir un rayon d'angle de bordure au moyen d'une mesure de longueur (la longueur du rayon du cercle imaginaire qui a produit le coin arrondi). Plus la valeur est élevée, plus les angles seront arrondis. Le pixel est l'unité de mesure la plus appropriée pour l'affichage écran. Vous pouvez également utiliser une valeur de pourcentage comprise entre 0% (pas d'arrondi) à 50% (arrondi maximal). Ce bord arrondi ne rogne pas le contenu de l'élément.

Cette propriété accepte une, deux, trois ou quatre valeurs radius, selon le nombre de coins et les coins spécifiques auxquels vous souhaitez appliquer l'arrondi. Les valeurs spécifiées sont interprétées comme l'indique le tableau suivant.

Nombre de valeursEffet
1La valeur spécifiée est appliquée aux quatre coins.
2La première valeur est appliquée aux coins supérieur gauche et inférieur droit, et la seconde, aux coins supérieur droit et inférieur gauche
3La première valeur est appliquée au coin supérieur gauche, la deuxième aux coins supérieur droit et inférieur gauche, et la troisième, au coin inférieur droit
4Les angles supérieur gauche, supérieur droit, inférieur droit et inférieur gauche sont respectivement définis
Valeur initiale

0

Exemple
div.hotbox {-moz-border-radius:20px}
div.circle {-moz-border-radius:50%}
S'applique à 

Tous les éléments.

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).




Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web


Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.


Valid HTML 4.01 Transitional
Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu