border-top-right-radius

La propriété border-top-right-radius définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.

Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de background-clip.

Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie border-radius et que cette dernière est appliquée après border-top-radius-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.

Syntaxe

/* Le coin est un quart de cercle         */
/* La valeur indique le rayon de courbure */
border-top-right-radius: 3px;

/* Le coin est un quart d'ellipse         */
/* La première valeur indique le demi-axe */
/* horizontal et la seconde le demi-axe   */
/* vertical                               */
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

Cette propriété peut prendre deux formes :

Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
Une seconde avec deux valeurs
- La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
- La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin

Valeurs

<length-percentage>: La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type <length>. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.

Syntaxe formelle

<length-percentage>{1,2}où 
<length-percentage> = <length> | <percentage>

Exemples

CSS

div {
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 130px;
}

.arc_cercle {
  border-top-right-radius: 40px 40px;
}

.arc_ellipse {
  border-top-right-radius: 40px 20px;
}

.pourcentage {
  border-top-right-radius: 40%;
}

.rognage {
  border: black 10px double;
  border-top-right-radius: 40%;
  background-color: rgb(250,20,70);
  background-clip: content-box; // essayez margin-box...
}

HTML

 <div class="arc_cercle"></div>
 <div class="arc_ellipse"></div>
 <div class="pourcentage"></div>
 <div class="rognage"></div>

Résultat

Spécifications

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

Valeur initiale	`0`
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ée	non
Pourcentages	se rapporte à la dimension correspondance de la boîte de bordure
Valeur calculée	deux `longueurs` absolues ou deux `pourcentages`
Type d'animation	une longueur, pourcentage ou calc() ;

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`border-top-right-radius`	Chrome Support complet 4 Support complet 4 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 were always rendered as if `border-style` was solid. This has been fixed in Firefox 50. Support complet 49 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 44 Préfixée Désactivée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Désactivée From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. Aucun support 1 — 12 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-moz-border-radius-topright`	IE Support complet 9	Opera Support complet 10.5 Support complet 10.5 Support complet 15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari Support complet 5 Support complet 5 Support complet 3 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet ≤37 Support complet ≤37 Support complet ≤37 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android Support complet 18 Support complet 18 Support complet 18 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Android Support complet 4 Notes Support complet 4 Notes Notes Prior to Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50. Support complet 49 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 44 Préfixée Désactivée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Désactivée From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. Aucun support 4 — 14 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-moz-border-radius-topright`	Opera Android Support complet 11 Support complet 11 Support complet 14 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari iOS Support complet 4.2 Support complet 4.2 Support complet 1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support complet 1.0 Support complet 1.0 Support complet 1.0 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Elliptical corners	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 3.5	IE Support complet 9	Opera Support complet 10.5	Safari Support complet 3	WebView Android Support complet ≤37	Chrome Android Support complet 18	Firefox Android Support complet 4	Opera Android Support complet 14	Safari iOS Support complet 1	Samsung Internet Android Support complet 1.0
Percentages	Chrome Support complet 4	Edge Support complet 12	Firefox Support complet 4 Support complet 4 Support complet 1 Notes Notes Before Firefox 4, the `<percentage>` was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-topright` was always drawing an arc of circle, and never an ellipse, when followed by a single value.	IE Support complet 9	Opera Support complet 10.5	Safari Support complet 5	WebView Android Support complet ≤37	Chrome Android Support complet 18	Firefox Android Support complet 4	Opera Android Support complet 14	Safari iOS Support complet 4.2	Samsung Internet Android Support complet 1.0

Légende

Support complet: Support complet
Voir les notes d'implémentation.: Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.: Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.: Cette fonctionnalité utilise un nom non-standard.
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

La propriété raccourcie border-radius
Les propriétés pour les autres coins :

Dernière modification : Apr 6, 2019, par des contributeurs MDN