-moz-outline-radius

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Dans les applications Mozilla (ex. Firefox), la propriété -moz-outline-radius peut être utilisée afin que le contour dessiné autour d'un élément ait des angles arrondis. Le contour (outline) est dessiné autour des éléments pour les faire ressortir.

La propriété -moz-outline-radius est une propriété raccourcie qui permet de définir les quatre propriétés destinées à chacun des angles -moz-outline-radius-topleft, -moz-outline-radius-topright, -moz-outline-radius-bottomright et -moz-outline-radius-bottomleft.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéenon
Pourcentagespour chaque propriété individuelle de la propriété raccourcie :
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Animablepour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Une seule valeur */
-moz-outline-radius: 25px;

/* Deux valeurs */
-moz-outline-radius: 25px 1em;

/* Trois valeurs */
-moz-outline-radius: 25px 1em 12%;

/* Quatre valeurs */
-moz-outline-radius: 25px 1em 12% 4mm;

/* Valeurs globales */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;

Valeurs

Note : Les valeurs pour les coefficients elliptiques et les valeurs de type <percentage> respectent la même syntaxe que pour border-radius.

Une, deux, trois ou quatre valeurs <outline-radius> dont chacune peut être de type :

<length>
Voir <length> pour les valeurs possibles.
<percentage>
Voir <percentage>, voir border-radius pour plus de détails sur la proportionnalité des pourcentages.

Gestion des valeurs multiples :

  • Si une seule valeur est définie, celle-ci s'applique pour les 4 angles.
  • Si deux valeurs sont fournies, la première s'applique aux angles en haut à gauche et en bas à droite et la seconde s'applique aux angles en haut à droite et en bas à gauche.
  • Si trois valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième aux angles en haut à droite et en bas à gauche et la troisième s'applique à l'angle en bas à droite.
  • Si quatre valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième en haut à droite, la troisième en bas à droite et la quatrième en bas à gauche.

Syntaxe formelle

<outline-radius>{1,4} [ / <outline-radius>{1,4} ]?

Exemples

CSS

.exemple1 { 
  border: 1px solid black;
  outline: dotted red;
  -moz-outline-radius: 12% 1em 25px;
}

.exemple2 {
  border: 1px solid black;
  outline: dotted red;
  -moz-outline-radius-topleft: 12%;
  -moz-outline-radius-topright: 1em;
  -moz-outline-radius-bottomright: 35px;
  -moz-outline-radius-bottomleft: 1em;
}

HTML

<p class="exemple1">
  La propriété outline-style en utilisant -moz-outline-radius
</p> 
<p class="exemple2">
  Un exemple légèrement plus compliqué avec -moz-outline-radius-xxx
</p>

Résultat

Notes

  • Les coins pour lesquels on utilise la valeur dotted ou dashed sont affichés avec des lignes pleines (cf. bug 382721).
  • Cette propriété sera vraisemblablement abandonnée dans les prochaines versions de Gecko (cf. bug 315209).

Spécifications

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple Pas de support 1.5 (1.8) Pas de support Pas de support Pas de support
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple Pas de support Pas de support 1.0 (1.8) ? Pas de support Pas de support Pas de support Pas de support

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, FredB, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,