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 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;
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.| 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 |
Syntaxe
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 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. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 4 1 -webkit- | (Oui) (Oui) -webkit- | 41 1 — 12 (as | 9 | 10.5 | 5 3 -webkit- |
| Percentages | 4 | (Oui) | 4 12 | 9 | 10.5 | 5 |
| Ellipitcal corners | 1 | (Oui) | 3.5 | 9 | 10.5 | 3 |
| Fonctionnalité | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Support simple | ? | ? | (Oui) (Oui) -webkit- | (Oui)1 | ? | ? | ? |
| Percentages | ? | ? | (Oui) | (Oui) | ? | ? | ? |
| Ellipitcal corners | ? | ? | (Oui) | (Oui) | ? | ? | ? |
1. Prior to Firefox 50.0, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.0.
2. 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.
Voir aussi
- La propriété raccourcie
border-radius - Les propriétés pour les autres coins :