La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.

La courbure s'applique à l'arrière-plan (défini avec la propriété background) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par background-clip.

Cette propriété est une propriété raccourcie qui permet de définir :

La propriété border-radius ne s'applique pas aux tableaux lorsque border-collapse vaut collapse.

Note : Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (border-radius:0 0 inherit inherit pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.

Syntaxe

/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */
/* On utilise le même rayon pour les quatre angles */
border-radius: 10px;

/* 1. coin en haut à gauche et en bas à droite     */
/* 2. puis coin en haut à droit et en bas à gauche */
border-radius: 10px 5%;

/* 1. coin en haut à gauche                    */
/* 2. coin en haut à droite et en bas à gauche */
/* 3. coin en bas à droite                     */
border-radius: 2px 4px 2px;

/* 1. coin en haut à gauche */
/* 2. coin en haut à droite */
/* 3. coin en bas à droite  */
/* 4. coin en bas à gauche  */ 
border-radius: 1px 0 3px 4px;

/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */
/* On sépare les rayons horizontaux des verticaux par une barre oblique    */
/* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */
border-radius: 10px 5% / 20px;

/* rayons horizontaux puis / puis rayons verticaux */
/* 1. coin en haut à gauche et en bas à droite     */
/* 2. puis coin en haut à droit et en bas à gauche */ 
border-radius: 10px 5% / 20px 30px;

/* rayons horizontaux puis / puis rayons verticaux */
/* 1. coin en haut à gauche                        */
/* 2. coin en haut à droite et en bas à gauche     */
/* 3. coin en bas à droite                         */ 
border-radius: 10px 5px 2em / 20px 25px 30%;

/* rayons horizontaux puis / puis rayons verticaux */ 
/* 1. coin en haut à gauche                        */
/* 2. coin en haut à droite                        */
/* 3. coin en bas à droite                         */
/* 4. coin en bas à gauche                         */ 
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Valeurs globales */
border-radius: inherit;
border-radius: initial;
border-radius: unset;

La propriété border-radius peut être définie avec :

  • une, deux, trois voire quatre valeurs de longueur (<length>) ou de pourcentages (<percentage>). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle.
  • puis éventuellement une barre oblique (/) suivie d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage qui permettent de définir un rayon de courbure supplémentaire pour créer des coins elliptiques.

Valeurs

Une seule valeur all-corner.png Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.
Deux valeurs (coin en haut à gauche et en bas à droite) top-left-bottom-right.png Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.
Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs) top-right-bottom-left.png Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.
Coin en haut à gauche top-left.png Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
Coin en haut à droite top-right.png Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
Coin en bas à droite bottom-rigth.png Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
Coin en bas à gauche bottom-left.png Une valeur de longueur (type <length>) ou un pourcentage (type <percentage>) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
<length>
Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de <length>. Les valeurs négatives sont considérées comme invalides.
<percentage>
Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir <percentage> pour plus de détails.

Ainsi :

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;

Syntaxe formelle

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?


<length-percentage> = <length> | <percentage>

Exemples

CSS

div {
  height: 100px;
  width: 200px;
  border-style: solid;
  border-color: black;
  background-color: palegreen;
}

.arrondi_droit {
  border-radius: 10px 40px 40px 10px;
}

.ellipse {
  border-radius: 50%;
}

.pointille {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

.tirets {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

}

.slash {
  border-radius: 13em/3em;
}

HTML

<div class="arrondi_droit"></div>

<div class="ellipse"></div>

<div class="tirets"></div>

<div class="pointille"></div>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-radius' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments, mais les agents utilisateurs ne sont pas tenus de l'appliquer aux éléments de type table ou inline-table lorsque border-collapse vaut collapse. Le comportement sur les éléments de type table interne est pour l'instant indéfini.. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la dimension correspondance de la boîte de bordure
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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 4
Notes
Support complet 4
Notes
Notes Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 4
Notes
Support complet 4
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Notes To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%;. Firefox 4 also makes rounded corners clip content and images if overflow: visible is not set.
Aucun support 1 — 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 9Opera Support complet 10.5
Notes
Support complet 10.5
Notes
Notes In Opera prior to version 11.60, replaced elements with border-radius will not have rounded corners.
Safari Support complet 5
Notes
Support complet 5
Notes
Notes Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 2
Préfixée
Support complet 2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet OuiEdge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Opera Android Support complet Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
Elliptical bordersChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes Prior to Chrome 4, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
Edge Support complet 12Firefox Support complet 3.5IE Support complet OuiOpera Support complet OuiSafari Support complet Oui
Notes
Support complet Oui
Notes
Notes Prior to Safari 4.1, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Aucun support NonSafari iOS ? Samsung Internet Android Support complet Oui
4 values for 4 cornersChrome Support complet 4Edge Support complet 12Firefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet 5WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Aucun support NonSafari iOS ? Samsung Internet Android Support complet Oui
PercentagesChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Edge Support complet 12Firefox Support complet 4
Notes
Support complet 4
Notes
Notes <percentage> values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.
IE Support complet OuiOpera Support complet 11.5
Notes
Support complet 11.5
Notes
Notes The implementation of <percentage> values was buggy in Opera prior to 11.50.
Safari Support complet 5.1
Notes
Support complet 5.1
Notes
Notes <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
WebView Android Support complet Oui
Notes
Support complet Oui
Notes
Notes <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Aucun support NonSafari iOS Support complet Oui
Notes
Support complet Oui
Notes
Notes <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, someone, Prinz_Rana, teoli, Qu3tzalify
Dernière mise à jour par : SphinxKnight,