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.

/* 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;

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 :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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} ]?


<outline-radius> = <length> | <percentage>

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 1.5IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Étiquettes et contributeurs liés au document

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