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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
.
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
- La première est une longueur (
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 |
Média | visuel |
Valeur calculée | deux longueurs absolues ou deux pourcentages |
Type d'animation | une longueur, pourcentage ou calc() ; |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome
Support complet
4
| Edge
Support complet
12
| Firefox
Support complet
4
| IE Support complet 9 | Opera Support complet 10.5 | Safari
Support complet
5
| WebView Android ? | Chrome Android ? | Edge Mobile
Support complet
Oui
| Firefox Android
Support complet
Oui
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Percentages | Chrome Support complet 4 | Edge Support complet 12 | Firefox
Support complet
4
| IE Support complet 9 | Opera Support complet 10.5 | Safari Support complet 5 | WebView Android ? | Chrome Android ? | Edge Mobile Support complet Oui | Firefox Android Support complet Oui | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Ellipitcal 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 ? | Chrome Android ? | Edge Mobile Support complet Oui | Firefox Android Support complet Oui | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Compatibilité inconnue
- Compatibilité inconnue
- 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 :