border-radius

Résumé

La propriété CSS border-radius peut être utilisée pour arrondir les coins des bordures. Le rayon s'applique aussi à background même si l'élément n'a pas de bordure.

border-radius est un raccourci pour déterminer les quatre propriétés border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius.

Syntaxe

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

Valeurs

Accepte une, deux, trois ou quatre valeurs de <border-radius>, suivies d'un second ensemble de valeurs optionelles séparées par un slash / . <border-radius> utilise un des types :

<longueur>
Voir <longueur> pour les unités possibles  .
<pourcentage>
Les pourcentages pour le rayon horizontal sont fonction de la largeur de la boîte incluant les bordures, tandis que les pourcentages pour le rayon vertical sont fonction de la hauteur de la boîte incluant les bordures.

Si une valeur est définie, le rayon est appliqué aux 4 coins.
Si deux valeurs sont définies, la première s'applique aux coins top-left et bottom-right, la seconde s'applique aux coins top-right et bottom-left.
Quatre valeurs s'appliquent dans l'ordre suivant aux coins top-left, top-right, bottom-right, bottom-left.
Trois valeurs : la seconde valeur s'applique aux coins top-right et bottom-left.

Si le slash suivi d'un second ensemble de rayons est défini, les valeurs précédant le slash définissent les rayons horizontaux, tandis que les valeurs suivant le slash définissent les rayons verticaux. Si le slash est oublié, les rayons verticaux et horizontaux seront définis avec les mêmes rayons.

Par exemple !:

border-radius: 1em/5em;

/* est équivalent à */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
border-radius: 4px 3px 6px / 2px 4px;

/* est équivalent à */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Exemples

 border: solid 10px;
 
 /* la bordure se courbe pour former un « D » */
 border-radius: 0 50px 50px 0;
 border: groove 1em red;
 border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
   background: gold;
   border-radius: 40px 10px; 
background: black;
color: gray;
border-radius: 50%;

Notes

  • Les bordures dotted et dashed sont affichées comme solid dans Gecko ; voir bug 382721.
  • border-radius ne s'applique pas aux éléments table lorsque border-collapse vaut collapse.
  • Les anciennes versions de WebKit gèrent les valeurs mutiples d'une manière différente, voir ci-dessous pour plus d'information.

Spécifications

Spécification Statut Commentaire
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

Compatibilité des navigateurs

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base 4.0 (2.0)
1.0 (1.7 ou moins)-moz
4.0
0.2-webkit
9.0 10.5 5.0
3.0-webkit
Bordures elliptiques 3.5 (1.9.1) oui oui oui oui, mais voir ci-dessous
4 valeurs pour 4 coins oui 4.0 oui oui 5.0
Pourcentages oui mais était (voir ci-dessous) oui oui 11.5 5.1
Fonction iOS Safari Opera Mini Opera Mobile Android Browser
Support de base 3.2-webkit Pas de support Pas de support 2.1-webkit
Bordure elliptiques ? Pas de support Pas de support ?
4 valeurs pour 4 coins ? Pas de support Pas de support ?
Pourcentages ? Pas de support Pas de support ?

Valeurs <pourcentage>

  • ne sont pas supportées dans les anciennes versions de Chrome et Safari (fixé en septembre 2010)
  • sont boguées dans les versions d'Opera précédant 11.50
  • sont implémentés d'une manière non-standard avant Gecko 2.0 (Firefox 4). Les deux rayons horizontaux et verticaux étaient proportionnels à la largeur de la boîte incluant les bordures.

Notes

Les anciennes versions de Safari et Chrome (avant WebKit 532.5)

  • supportent seulement une valeur pour 4 coins. Pour des rayons différents, la forme longue de définition des propriétés devait être utilisée
  • ne supportent pas la notation utilisant le  slash / . Si deux valeurs sont spécifiées, une bordure elliptique est définie pour les 4 coins
    /* ceci est équivalent à : */
    
    -webkit-border-radius: 40px 10px;
            border-radius: 40px/10px;
    

Dans Gecko 2.0 -moz-border-radius a été renommé en border-radius. -moz-border-radius est supporté comme un alias pour une période de transition (au moins jusqu'à la prochaine version de Gecko). Pour se conformer au standard CSS3, Gecko 2.0

  • modifie la gestion des valeurs <percentage> pour correspondre à la spécification. Vous pouvez spécifier une ellipse comme bordure sur un élément de dimensions quelconques en utilisant border-radius: 50%;
  • coupe le contenu et les images selon la bordure arrondie (si overflow: visible n'est pas défini)

Dans Opera (avant Opera 11.60), l'application de border-radius à des éléments remplacés ne crééra par de bordures arrondies.

Voir également

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : tregagnon, Fredchat, Yuichiro, teoli, FredB, Kyodev
Dernière mise à jour par : FredB,
Masquer la barre latérale